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 width: 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 width: 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
原文地址：https://www.cnblogs.com/TinHead/p/8213802.html
时间： 2024-10-19 11:11:11