This article describes the method of + implementing asynchronous image upload. Share it for your reference, as follows:
First we need to prepare:
jquery Click hereDownload this site。
Click hereDownload this site。
page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="" Inherits="JqueryFormTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery-1.8." type="text/javascript"></script>
<script src="JS/" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("#fm1").ajaxSubmit({
url: "",
type: "post",
success: function (data) {
alert(data);
//The IE display image will be added by default, and it must be removed to display it in the lower version of IE. data = ("<PRE>", "").replace("</PRE>", "");
$("#divimg").append("<img src='" + data + "' width='200px' height='200px'/>");
//Clear the value in the file control var file = $("#btnfile");
(().val(""));
();
}
});
});
})
</script>
</head>
<body>
<form method="post">
<!--method="post"Can't be omitted，existieEssential inside-->
<input type="file" name="btnfile" value="submit" />
<br />
<input type="button" value="Upload" />
</form>
<div >
</div>
</body>
</html>
：
<%@ WebHandler Language="C#" Class="img" %>
using System;
using ;
public class img : IHttpHandler {
public void ProcessRequest (HttpContext context) {
= "text/plain";
//Get the object of the uploaded file HttpPostedFile img = ["btnfile"];
//Get the name of the uploaded file string s = ;
//Intercept to obtain the name of the uploaded file (ie upload will also include the absolute path, and only the name of the file is obtained here) string str = (("\\") + 1);
string path = "~/upload/"+ str;
//Save the file ((path));
//It is mainly to get the application virtual path name, because the response to the page will not be automatically added, resulting in the inability to display the picture. ( + (1));//(1) Used to remove the first ~ character }
public bool IsReusable {
get {
return false;
}
}
}
For more information about jQuery, please visit the special topic of this site:Summary of jQuery switching effects and skills》、《Summary of jQuery drag and drop special effects and skills》、《Summary of jQuery extension skills》、《Summary of common classic effects of jQuery》、《Summary of jQuery animation and special effects usage》、《Summary of jquery selector usage"and"Summary of commonly used plug-ins and usages of jQuery》
I hope this article will be helpful to everyone's jQuery programming.