javascript - 如何使用formData上传file数组
本文介绍了javascript - 如何使用formData上传file数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
因为 input type=‘file’ 再次点击会将之前的fileList覆盖,所以我先将选中的文件转成base64作为预览图片,类似于这样,可以多次添加
但是我在上传的时候如何将多个预览图片添加到 formdata 对象中,后台接受参数是一个 MultipartFile[] files 数组。
下面是我的错误做法:
function getImgFiles() {
var imgFiles = [];
var imgs = $('img');
$.each(imgs, function (i, item) {
var blob = dataURItoBlob(item.src);
imgFiles.push(new File([blob], item.id));
});
return imgFiles;
}
/**
* base64->blob
* @param dataURI
* @returns {Blob}
*/
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
var formData = new FormData($('form').get(0));
formData.append('files', getImgFiles());
//然后使用ajax上传,但是后台没有接受到 files 参数。
解决方案
可以有以下几种做法:
$.each(getImgFiles(), function(i, file){
formData.append('files', file);
});
$.each(getImgFiles(), function(i, file){
formData.append('files[]', file);
});
$.each(getImgFiles(), function(i, file){
formData.append('files_' + i, file);
});
都应该可以在后台接收到文件。而具体用哪种做法要看你后台所使用的语言和框架。
就PHP而言,我喜欢最后一种,可以用 $_FILES
一次遍历就能获取到所有的文件/图片。
这篇关于javascript - 如何使用formData上传file数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文