ajaxfileupload异步上传文件

ajaxfileupload插件可以以异步方式上传文件（其实现：iframe），不像传统那样需要刷新，下面就介绍下其使用

1、HTML部分（先引入jquery）：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>无刷新单文件上传</title>
 6     <script src="jquery-2.2.4.min.js"></script>
 7     <script src="ajaxfileupload.js"></script>
 8 </head>
 9 <body>
10     <p style="display:none"><input type="file" id="file1" name="file" /></p>
11     <input type="button" value="上传" />
12 
13     <script type="text/javascript">
14         $(function () {
15             $(":button").click(function () {
16                 $("#file1").click();
17             })
18         })
19         $(document).on("change", "#file1", function () {
20             $.ajaxFileUpload({
21                 url: '/upload.ashx', //用于文件上传的服务器端请求地址
22                 secureuri: false, //一般设置为false
23                 fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
24                 dataType: 'json', //返回值类型 一般设置为json
25                 success: function (data, status)  //服务器成功响应处理函数
26                 {
27                     if (typeof (data.error) != 'undefined') {
28                         if (data.error != '') {
29                             alert(data.error);
30                         } else {
31                             alert(data.msg);
32                         }
33                     }
34                 },
35                 error: function (data, status, e)//服务器响应失败处理函数
36                 {
37                     alert(e);
38                 }
39             })
40         });
41     </script>
42 </body>
43 </html>

2、后台代码（使用的一般处理程序[ashx]）：

 1     public class upload : IHttpHandler
 2     {
 3         public void ProcessRequest(HttpContext context)
 4         {
 5             HttpFileCollection files = context.Request.Files;
 6             string msg = string.Empty;
 7             string error = string.Empty;
 8             string imgurl;
 9             if (files.Count > 0)
10             {
11                 files[0].SaveAs(context.Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
12                 msg = " 成功! 文件大小为:" + files[0].ContentLength;
13                 imgurl = "/" + files[0].FileName;
14                 string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
15                 context.Response.Write(res);
16                 context.Response.End();
17             }
18         }
19 
20         public bool IsReusable
21         {
22             get
23             {
24                 return false;
25             }
26         }
27     }

注意：IE低版本可能会不兼容（上传文件框被隐藏，而是通过点击按钮去模拟触发文件框点击事件）

参考：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html