js使用formData實(shí)現(xiàn)批量上傳
最近項(xiàng)目需要批量上傳附件，查了下資料，網(wǎng)上很多但看著一臉懵，只貼部分代碼，介紹也不詳細(xì)，這里記錄一下自己的采坑與多種實(shí)現(xiàn)，以免以后忘記。
這里先介紹下FormData對象，以下內(nèi)容摘自地址
XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的
在我的自定義input文件上傳樣式里就已經(jīng)實(shí)現(xiàn)里單文件上傳，并且實(shí)現(xiàn)了自定義input樣式；如果構(gòu)造FormData對象是傳入表單js對象，formData會自動注入表單里的值；如果是new一個空對象，然后手動append的表單類型為file時要注意：這里append進(jìn)去的是File對象，而不是FileList對象 先看一下大概效果： controller有兩種方法：三種方式調(diào)的都是用一個接口 方式1 點(diǎn)擊Add，追加一個input，點(diǎn)擊Delete，刪除一個input，點(diǎn)擊叉號也可以刪除對應(yīng)的input，需要單獨(dú)為每個input選擇文件 效果 html js 方式2 第二種方式只有一個input，用的是multiple="multiple"屬性，可以再彈窗里選擇多個文件提交，如果再加工一下，也做成第三種一樣，展示出文件名，同時可以刪除對應(yīng)的文件 效果 html js 方式3 定義了一個隱藏的input，并將Select File按鈕的click與input的click對等，點(diǎn)擊按鈕相當(dāng)于點(diǎn)擊input，彈出選擇文件對話框，監(jiān)聽了input的change事件，將選擇的file對象push到全局?jǐn)?shù)組變量attachmentArray中，點(diǎn)擊Upload時再遍歷注入到formData中 效果 html js 最后看一下file數(shù)據(jù)、請求頭、還有振奮人心的后臺成功接參圖 file數(shù)據(jù) 請求頭 成功接參 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
/**
* 批量上傳
*/
@PostMapping("upload")
public ResultModel<List<AttachmentVo>> upload(HttpServletRequest request, @RequestParam("applyId") String applyId){
List<MultipartFile> multipartFileList = ((MultipartHttpServletRequest) request).getFiles("attachment");
System.out.println(multipartFileList.size());
System.out.println(applyId);
return null;
}
/**
* 批量上傳2 （推薦使用）
*/
@PostMapping("upload2")
public ResultModel<List<AttachmentVo>> upload2(MultipartFile[] attachment,@RequestParam("applyId") String applyId){
System.out.println(attachment.length);
System.out.println(applyId);
return null;
}
<form id="attachments" enctype="multipart/form-data" class="form-horizontal nice-validator n-yellow" novalidate="novalidate">
<div class='form-body'>
<div class='form-group'>
<label class="control-label col-md-1">附件管理：</label>
<div class="col-md-4">
<button id="attachmentAddBtn" type="button" class="btn btn-default">Add Attachment</button>
<button id="attachmentDeleteBtn" type="button" class="btn btn-default">Delete Attachment</button>
<button id="attachmentUploadBtn" type="button" class="btn btn-default">Upload</button>
</div>
</div>
<div class='form-group'>
<label class="control-label col-md-1">附件上傳：</label>
<div id="attachmentInputs" class="col-md-3">
</div>
</div>
</div>
</form>
//attachment-remove
$("#attachmentInputs").on("click", ".attachment-remove", function (even) {
$(this).prev().remove();//刪除上一個兄弟節(jié)點(diǎn)
$(this).remove();//刪除自己
});
//add but
$("#attachmentAddBtn").click(function (even) {
//name值一樣就可以
$("#attachmentInputs").append("<input name=\"attachment\" type=\"file\" class=\"form-control input-attachment\"/><i class=\"fa fa-times attachment-remove\"></i>");
});
//delete
$("#attachmentDeleteBtn").click(function (even) {
var files = $("#attachmentInputs input[type='file']");
files.each(function (index, element) {
//從最下面開始刪除，至少保留一個
if (!(index === 0) && index === (files.length - 1)) {
$(element).next().remove();
$(element).remove();
}
});
});
//upload
$("#attachmentUploadBtn").click(function (even) {
//1、通過HTML表單創(chuàng)建FormData對象 自動注入
// var formData = new FormData($("#attachments")[0]);
//2、從零開始創(chuàng)建FormData對象 手動注入
var formData = new FormData();
//注入 name=file
var files = $("#attachmentInputs input[type='file']");
for (var i = 0; i < files.length; i++) {
//注意：這里append進(jìn)去的是File對象，而不是FileList對象
formData.append("attachment", files[i].files[0]);
}
//注入name=text
formData.append("applyId", "123456");
console.log(formData.getAll("attachment"));
//執(zhí)行上傳
$.ajax({
url: ctx + "/attachment/upload2",
type: "post",
data: formData,
processData: false,
contentType: false,
success: function (data) {
},
error: function (e) {
}
});
});
//add one input
$("#attachmentAddBtn").click();
<form id="attachments2" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
<div class='form-body'>
<div class='form-group'>
<label class="control-label col-md-1">附件管理：</label>
<div class="col-md-4">
<button id="attachmentUploadBtn2" type="button" class="btn btn-default">Upload</button>
</div>
</div>
<div class='form-group'>
<label class="control-label col-md-1">附件上傳：</label>
<div id="attachmentInputs2" class="col-md-3">
<input name="attachment" type="file" class="form-control input-attachment" multiple="multiple"/>
</div>
</div>
</div>
</form>
//upload2
$("#attachmentUploadBtn2").click(function (even) {
//1、通過HTML表單創(chuàng)建FormData對象 自動注入
// var formData = new FormData($("#attachments2")[0]);
//2、從零開始創(chuàng)建FormData對象 手動注入
var formData = new FormData();
//注入 name=file
var files = $("#attachmentInputs2 input[type='file']");
for (var i = 0; i < files[0].files.length; i++) {
formData.append("attachment", files[0].files[i]);
}
//注入name=text
formData.append("applyId", "123456");
console.log(formData.getAll("attachment"));
//執(zhí)行上傳
$.ajax({
url: ctx + "/attachment/upload2",
type: "post",
data: formData,
processData: false,
contentType: false,
success: function (data) {
},
error: function (e) {
}
});
});
<form id="attachments3" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
<div class='form-body'>
<div class='form-group'>
<label class="control-label col-md-1">附件管理：</label>
<div class="col-md-4">
<button id="selectFile" type="button" class="btn btn-default">Select File</button>
<button id="attachmentUploadBtn3" type="button" class="btn btn-default">Upload</button>
</div>
</div>
<div class='form-group'>
<label class="control-label col-md-1">附件上傳：</label>
<input id="attachmentInputs3" type="file" style="display: none;"/>
<div id="attachmentText3" class="col-md-3">
</div>
</div>
</div>
</form>
//存放file對象
var attachmentArray = [];
//attachment-remove
$("#attachmentText3").on("click", ".attachment-remove", function (even) {
//刪除attachmentArray數(shù)據(jù)
attachmentArray.splice($(this).data("index"), 1);
//刪除html對象
$(this).prev().prev().remove();
$(this).prev().remove();
$(this).remove();
});
//Select File
$("#selectFile").click(function (even) {
// 獲取input
$("#attachmentInputs3").click();
});
//input change
$("#attachmentInputs3").change(function (even) {
// 獲取input
var fileName = $(this).val();
var file = $(this)[0].files[0];
//是否選擇了文件
if (fileName) {
attachmentArray.push(file);
$("#attachmentText3").append("<div><p class='attachment-text-p'>" + fileName + "</p><i data-index='" + (attachmentArray.length - 1) + "' class=\"fa fa-times attachment-remove\"></i></div>")
}
});
//upload3
$("#attachmentUploadBtn3").click(function (even) {
//這里只能手動注入
var formData = new FormData();
//遍歷數(shù)據(jù)，手動注入formData
for (var i = 0; i < attachmentArray.length; i++) {
formData.append("attachment", attachmentArray[i]);
}
formData.append("applyId", "123456");
console.log(formData.getAll("attachment"));
//執(zhí)行上傳
$.ajax({
url: ctx + "/attachment/upload",
type: "post",
data: formData,
processData: false,
contentType: false,
success: function (data) {
},
error: function (e) {
}
});
});
相關(guān)文章
這篇文章主要介紹了JavaScript中的全局對象介紹,對于任何JavaScript程序,當(dāng)程序開始運(yùn)行時,JavaScript解釋器都會初始化一個全局對象以供程序使用,需要的朋友可以參考下2015-01-01
這篇文章介紹了，js中的Replace()的一些高級的使用方法，有需要的朋友可以參考一下2013-06-06
本文通過具體的示例來給大家詳細(xì)解釋了下javascript的連續(xù)賦值問題，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
JS中如何實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁面頂部的問題
這篇文章主要介紹了JS中實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁面頂部的問題，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-01-01
眾所周知圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和 Web 應(yīng)用和項(xiàng)目的可靠性。現(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實(shí)現(xiàn)折線圖。2016-09-09
這是一篇關(guān)于JavaScript數(shù)組使用的一些技巧，我們將使用不同的方法結(jié)合/合并兩個JS數(shù)組，以及討論每個方法的優(yōu)點(diǎn)/缺點(diǎn)2014-09-09
從數(shù)據(jù)庫讀取數(shù)據(jù)后將其輸出成html標(biāo)簽的三種方法
需要輸出成html標(biāo)簽時編譯器卻自動幫我們輸出成字符串，這該怎么辦？下面有個三個解決方法，一一測試便知其效果是如何2014-10-10
向當(dāng)前style sheet中插入一個新的style實(shí)現(xiàn)方法
今天為了臨時解決頁面樣式問題，為了方便，直接在這個公共的js里面向style sheet插入新的style rule，感興趣的朋友可以出納卡下哈2013-04-04
JavaScript實(shí)現(xiàn)圖片合成下載的示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片合成下載的示例，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了js獲取騰訊視頻ID的方法,涉及JavaScript針對URL地址規(guī)則的分析與字符串的截取操作相關(guān)操作技巧,需要的朋友可以參考下2016-10-10