一次FormData递归上传图片小记

作者 LoadingMore 日期 2017-08-14
一次FormData递归上传图片小记

问题

最近项目开发中遇到一个多图上传的需求,后台给的接口支持FormData.这里查看详情FormData

解决

刚开始没有太好的办法,之前用formdata传图,都是固定的个数,对应唯一的filename参数名字,不会发生冲突,所以刚开始想到了for循环…结果就是能上传,但是顺序全部搞乱了,还有就是图片传的重复,缺失严重

递归优化

想着for循环也不能控制上传进度,所以采用了递归的思路

// 伪代码
$('#sleect_input').off().on('change',function(e){
var files = e.target.files,
resFiles = [];
// 收集files
for(var i=0;i<files.length;i++){
resFiles.push(files[i])
}
// 上传
$('#upLoad').on('click',function(){
// 递归
(function uploadFiles(){
var f = resFiles.shift();
if(f){
// 这里创建是为了避免重名导致上传混乱,每次都重新创建新的对象
var formdata = new FormData();
formdata.append('file',f);
$.ajax({
url:'XXXXXXXXXXXXXXXXXXXXXX',
type: "POST",
data: formdata,
processData: false,
contentType: false,
}).always(function(){
console.log("pending+正在上传");
// 继续下一步上传
uploadFiles();
});
}else{
console.log("finished+上传完毕要做的事");
}
})()
})
})

至此,解决了多图片上传的问题