js_ajax模擬form表單提交_多檔案上傳_支援單個刪除
阿新 • • 發佈:2019-10-03
問題:由於只有一個file上傳按鈕,在多次點選上傳按鈕時,新的files檔案會覆蓋舊的files檔案,需要使用一個變數集合儲存;
單個檔案的刪除,也需要我們對這個集合進行修改,最後使用ajax模擬form表單提交功能。
html:
<section class="order-categories clearfix"> <div class="order-complaint-title">Order NO. $!{ORDER_ID}</div> <input type="hidden" value="$!{ORDER_ID}"name="OrderID" /> <textarea class="complaint-text" id="textareaContent" name="Content" placeholder="What is your Complaint?(At least 20 characters)"></textarea> <ul class="upimg-outer clearfix"> <li class="add"> <div> <span class="icon"></span> <input id="upFile1" type="file" name="file" value="" multiple="multiple" accept="image/*"> </div> </li> </ul> <input type="button" name="" id="btnSubmit" value="SUBMIT" class="order-complaint-btn"> </section>
JS:
圖片上傳&刪除方法:
uploadImgObjectCss.prototype = { init: function () { var _this = this; _this.removeImg(); _this.upFileEleChange(); }, upFileEleChange: function () { var _this = this; _this.upFileEle.bind("change", function () { _this.setImagePreview(); _this.removeImg(); }); }, //影象資料收集及預覽--最多上傳4張 setImagePreview: function () { var _this = this; var docObj = _this.upFileEle[0]; for (i = 0; i < 4; i++) { var imgObjPreview = new Image(); if (docObj.files && docObj.files[i]) { imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); if (_this.upimgOuter.children("li:not(.add)").size() <= 3) { //判斷files是否存在相同的圖片 var isExist = false; for (var f = 0; f < _this.files.length; f++) { if (_this.files[f].name == docObj.files[i].name) { isExist = true; } } if (!isExist) { _this.upimgOuter.find(".add").before($("<li><i></i></li>").append($("<div></div>").append($(imgObjPreview)))); _this.files.push(docObj.files[i]); } } }; }; if (_this.upimgOuter.children("li:not(.add)").size() >= 4) { _this.upimgOuter.find(".add").hide(); }; }, //刪除圖片 removeImg: function () { var _this = this; var $revPhotoI = $(".upimg-outer li i"); $revPhotoI.bind("click", function () { var index = _this.upimgOuter.find("i").index(this); if (index > -1) { _this.files.splice(index, 1); //從files移除下標從index開始往下1個元素 $(this).parent("li").remove(); if (_this.upimgOuter.children("li:not(.add)").size() >= 4) { _this.upimgOuter.find(".add").hide(); } else { _this.upimgOuter.find(".add").show(); } } }); } }
提交方法:
var formData = new FormData(); formData.append("OrderID", _this.orderID); formData.append("Content", $(window.OrderComplaintCache.textareaContent).val()); for (var i = 0; i < _this.uploadImgObjectCss1.files.length; i++) { //formData.append("fileArray", _this.uploadImgObjectCss1.files[i]); formData.append("file" + i, _this.uploadImgObjectCss1.files[i]); } $.ajax({ type: "post", url: "/ajax/usercenterHandler.js?action=complaintorder", data: formData, processData: false, //必須 contentType: false, //必須 success: function (json) { var data = null; try { data = JSON.parse(json); } catch (e) { data = new Function("return " + json + "")(); } _this.fadeOutIconMessage("message-submit-succ", window.OrderComplaintCache.successMessage, 3000, function () { window.history.go(-1); }); }
這裡要注意幾點:
processData
設定為false
。因為data
值是FormData
物件,不需要對資料做處理。//<form>
標籤新增enctype="multipart/form-data"
屬性。//cache
設定為false
,上傳檔案不需要快取。contentType
設定為false,不設定contentType值,
因為是由<form>
表單構造的FormData
物件,且已經聲明瞭屬性enctype="multipart/form-data"
,所以這裡設定為false。
上傳後,伺服器端程式碼需要使用從查詢引數名為file
獲取檔案輸入流物件,因為<input>
中宣告的是name="file"
。
重點1--FormData物件:
FormData物件是html5的一個物件,目前的一些主流的瀏覽器都已經相容。額,如果你說ie8什麼的,那我們還是來談談今天的天氣吧,我沒聽見。呵呵,開個玩笑,不支援FormData的,可以使用方法二,下面會介紹。接著說FormData,它是一個html5的javascript物件,非常的強大。
FormData可以憑空建立一個物件,然後往這個物件裡面新增資料,然後直接提交,不需要寫一行html程式碼;
重點2--FormData新增多個上傳檔案:
a.多個檔案使用同一個變數名:"fileArray";
formData.append("fileArray", _this.uploadImgObjectCss1.files[i]);
b.使用關鍵詞"file"+數字: file0,file1...
formData.append("file" + i, _this.uploadImgObjectCss1.files[i]);
c.如果只有一個檔案,除上面的方法外,可使用關鍵詞"file"新增到FormData中
更多專業前端知識,請上 【猿204