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