asp.net mvc 、 ajax 批量上傳檔案
阿新 • • 發佈：2019-02-06
<!DOCTYPE html> <html> <head> <title>多檔案上傳</title> </head> <body> <div> <form id="files-form" action="#" method="POST" enctype="multipart/form-data"> @*生成防偽標記*@ @Html.AntiForgeryToken() <input type="file" id="files" name="files" multiple="multiple"> <input type="submit" value="上傳" /> <div id="content"></div> </form> </div> <script src="~/Content/Scripts/Lib/jquery-1.10.2.min.js"></script> <script> var inputElement = document.getElementById("files"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { var fileList = this.files; var dd = document.getElementById('content'); for (var i = 0 ; i < fileList.length ; i++) { dd.innerHTML += fileList[i].name + "<br>"; } } $(document).ready(function () { $("#files-form").submit(function () { //獲取防偽標記 var token = $('input[name=__RequestVerificationToken]').val(); var headers = {}; headers["__RequestVerificationToken"] = token; var fileObj = document.getElementById("files").files; var params = new FormData(); for (var i = 0; i < fileObj.length; i++) { params.append("file" + i, fileObj[i]); } $.ajax({ type: "POST", url: "UploadFiles", data: params, contentType: false,//必須false才會自動加上正確的Content-Type processData: false,//必須false才會避開jQuery對 formdata 的預設處理 ，XMLHttpRequest會對 formdata 進行正確的處理 headers: headers, success:function(result) { alert(result.msg); }, error: function () { alert("Error"); } }); return false; }); }); </script> </body> </html>
Controller
//處理檔案上傳 [HttpPost] [ExtendedValidateAntiForgeryToken] public ActionResult UploadFiles(HttpPostedFileBase f) { if (!Request.IsAjaxRequest()) return View(); try { var files = Request.Files; if(files.Count==0) return Json(GetResult(false, "提示：沒有要上傳的檔案！", null)); var i = 1; foreach (string file in files) { //獲取檔案資訊 var curFile = Request.Files[file]; if (curFile != null && curFile.ContentLength < 1) continue; //獲取儲存路徑 var filesUrl = Server.MapPath("~/Upload"); if (Directory.Exists(filesUrl) == false)//路徑不存在則建立 Directory.CreateDirectory(filesUrl); if (curFile == null) continue; //獲取檔名 var fileName = Path.GetFileName(curFile.FileName); if (fileName == null) continue; //檔案字尾名 var filePostfixName = fileName.Substring(fileName.LastIndexOf('.')); //新檔名 var newFileName = (DateTime.Now.ToString("yyyyMMddHHmmss") + i) + filePostfixName; i++; // var path = Path.Combine(filesUrl, newFileName); //儲存檔案 curFile.SaveAs(path); } return Json(GetResult(true, "上傳成功！", null)); } catch (Exception ex) { return Json(GetResult(false, "上傳失敗、錯誤資訊：" + ex.Message, null)); } } /// <summary> /// 獲取結果集 /// </summary> /// <param name="rel">狀態</param> /// <param name="msg">提示資訊</param> /// <param name="data">資料集</param> /// <returns></returns> public static object GetResult(bool rel, string msg, object data) { return new Dictionary<string, object> { { "rel", rel }, { "msg", msg }, { "obj", data } }; } #region 防止CSRF攻擊特性 /// <summary> /// 防止CSRF攻擊特性 /// </summary> public class ExtendedValidateAntiForgeryToken : AuthorizeAttribute { public override void OnAuthorization(AuthorizationContext filterContext) { var request = filterContext.HttpContext.Request; if (request.HttpMethod != WebRequestMethods.Http.Post) return; if (request.IsAjaxRequest()) { var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName]; var cookieValue = antiForgeryCookie != null ? antiForgeryCookie.Value : null; //從cookies 和 Headers 中 驗證防偽標記 //這裡可以加try-catch AntiForgery.Validate(cookieValue, request.Headers["__RequestVerificationToken"]); } else { new ValidateAntiForgeryTokenAttribute().OnAuthorization(filterContext); } } } #endregion
效果圖片：
Demo 下載地址
http://yunpan.cn/cuFmakwtJUFBT 訪問密碼 1eda有疑問的可以給我留言哦。