HTML C# ajax结合ashx处理程序实现文件上传

ajax结合ashx处理程序实现文件上传

一、ajaxFileUpload是一个异步上传文件的jQuery插件。

　　ajaxFileUpload参数说明：(copy了别人的参数说明)

1、url　　　　　　　　　　上传处理程序地址。　　
2，fileElementId　　　　　需要上传的文件域的ID，即<input type="file">的ID。
3，secureuri　　　　　　　是否启用安全提交，默认为false。
4，dataType　　　　　　　服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error　　　　　　　　　提交失败自动执行的处理函数。
7，data 　　　　　　　　　自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 　　　　　　　　　当要提交自定义参数时，这个参数要设置成post

HTML代码：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     
 7     <!--引用相关的js文件  注意先引用jquery-->
 8     <script src="js/jquery-1.11.3.js"></script>
 9     <script src="js/ajaxfileupload.js"></script>
10     
11     <style>
12         .file {
13             position: relative;
14             background-color: #b32b1b;
15             border: 1px solid #ddd;
16              68px;
17             height: 25px;
18             display: inline-block;
19             text-decoration: none;
20             text-indent: 0;
21             line-height: 25px;
22             font-size: 14px;
23             color: #fff;
24             margin: 0 auto;
25             cursor: pointer;
26             text-align: center;
27             border: none;
28             border-radius: 3px;
29         }
30 
31             .file input {
32                 position: absolute;
33                 top: 0;
34                 left: -2px;
35                 opacity: 0;
36                  10px;
37             }
38     </style>
39     <script>
40         $(function () {
41             //选择文件
42             $(".file").on("change", "input[type='file']", function () {
43                 var filePath = $(this).val();
44                 //设置上传文件类型
45                 ////if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {
46          
47                     //上传文件
48                     $.ajaxFileUpload({
49                         url: 'FileHandler.ashx',//处理程序路径
50                         secureuri: false,
51                         fileElementId: 'btnfile',
52                         dataType: 'json',
53                         success: function (data, status) {
54                             //获取上传文件路径
55                             //$("#txt_filePath").val(data.filenewname);
56                             alert("文件上传成功！");
57                         },
58                         error: function (data, status, e) {
59                             //alert(e);
60                             alert("not");
61                         }
62                     });
63 
64                     
65                 ////} else {
66                 ////    alert("请选择正确的文件格式！");
67                 ////    //清空上传路径
68                 ////    $("#txt_filePath").val("");
69                 ////    return false;
70                 ////}
71             });
72         })
73     </script>
74 </head>
75 <body style="font-size:25px;">
76 
77     <!--ajax配合ashx实现文件上传-->
78 
79     <div>
80         <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly" />
81         <a class="file"><input id="btnfile" name="btnfile" type="file" />浏览</a>
82     </div>
83 </body>
84 </html>

ashx代码：

 1 <%@ WebHandler Language="C#" Class="FileHandler" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class FileHandler : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         //context.Response.ContentType = "text/plain";
10         //context.Response.Write("Hello World");
11 
12 
13         context.Response.ContentType = "text/plain";
14         string msg = string.Empty;
15         string error = string.Empty;
16         string result = string.Empty;
17         string filePath = string.Empty;
18         string fileNewName = string.Empty;
19 
20         //这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
21         HttpFileCollection files = context.Request.Files;
22         if (files.Count > 0)
23         {
24             //设置文件名
25             fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);
26             //保存文件
27             files[0].SaveAs(context.Server.MapPath("~/Upload/" + fileNewName));
28             msg = "文件上传成功！";
29             result = "{msg:'" + msg + "',filenewname:'" + fileNewName + "'}";
30         }
31         else
32         {
33             error = "文件上传失败！";
34             result = "{ error:'" + error + "'}";
35         }
36         context.Response.Write(result);
37         context.Response.End();
38     }
39  
40     public bool IsReusable {
41         get {
42             return false;
43         }
44     }
45 
46 }

如果想上传多张图片只要给 input 添加一个 multiple 属性

即：

<input id="btnfile" name="btnfile" type="file" multiple/>

就可以上传多个图片

ajaxFileUpload下载：

链接：https://pan.baidu.com/s/1slkfpOp 密码：5s8r