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
时间： 2024-08-26 00:58:27