And no unified upload function was established. So the code was transformed. I want to have an Ajax asynchronous upload image, this technology should be very old-fashioned. So directly opened the powerful cnblogs easily found this article directly according to gourd painting Scoop, the author's labor results directly "copycat." Soon the code was completely transformed. But the problem came when I posted the program on the server. The upload file is invalid! Sweat is the consequence of laziness. Continue to open the previously referenced article. The original author explained that it can only be used locally and cannot be published to the server. I thought I had to use the IFRAME + HTTP POST this depressing way??
So unwilling I opened a more powerful Google, began to search for solutions to the world, and finally Kungfu. Found the "Jquery.form.js".
The steps for uploading pictures asynchronously are as follows:
1. Refer to the jquery JS Framework (The benefits of this thing need not be more than a few) and then refer to "Jquery.form.js".
2. Establish general processing procedure ashx.
The core code is as follows:
Html:
Copy Code code as follows:
<asp:content id= "Content3" contentplaceholderid= "Head" runat= "Server" >
<script src= "<%=url.content (" ~/scripts/jquery-1.4.1.js ")%>" type= "Text/javascript" ></script>
<script src= "<%=url.content (" ~/scripts/jquery.form.js ")%>" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
Upload pictures
$ ("#btnUpload"). Click (function () {
if ($ ("#flUpload"). val () = "") {
Alert ("Please select a picture file, and then click Upload.") ");
Return
}
$ (' #UpLoadForm '). Ajaxsubmit ({
Success:function (HTML, status) {
var result = Html.replace ("<pre>", "");
result = Result.replace ("</pre>", "");
$ ("#image"). attr (' src ', result);
alert (result);
}
});
});
});
ASHX is as follows:
Copy Code code as follows:
Namespace Testmvc.utility
{
<summary>
Summary description for Picuploadhander
</summary>
public class Picuploadhander:ihttphandler
{
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
Verifying permissions for uploads Todo
String _filenamepath = "";
Try
{
_filenamepath = context. Request.files[0]. FileName;
Start uploading
String _savedfileresult = Uploadimage (_filenamepath, context);
Context. Response.Write (_savedfileresult);
}
Catch
{
Context. Response.Write ("Upload submit error");
}
}
Note: The entire upload uses AJAX asynchronous data, while jquery returns the relative path of the picture on the server after the upload succeeds. In general, this approach is relatively stronger than the traditional way of uploading pictures.
This example code to download, FireFox under the test pass. Http://xiazai.jb51.net/201011/yuanma/AjaxUploadPic.rar
