使用js的promise并发上传，由于js是单线程模式，所以promise实际上用的是js的event loop事件机制实现的，完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var fileret = new Array();
const uploadfilepromise = function(file) {
return new Promise((resovle, reject) => {
var postdata = new FormData();
postdata.set('filedata', file);
var filepath = file.webkitRelativePath;
var startpos = filepath.indexOf("/");
var lengths = filepath.lastIndexOf("/")-startpos;
// var folderpath="";
// alert(lengths);
var folderpath = "";
if (lengths > 0) {
folderpath = filepath.substr(startpos, lengths);
// alert(folderpath);
}
postdata.set('folderpath', folderpath);
// var filekey = this.files[i].name+this.files[i].size.toString();
$.ajax({
type: 'POST',
url: "上传图片文件的后端接口",
data: postdata,
cache: false,
processData: false,
contentType: false,
dataType: 'json',
success: function (ret) {
if (ret.err) {
ret.path = filepath;
fileret.push(ret);
}
resovle(ret);
},
error: function (ret) {
reject(ret);
},
complete: function(XMLHttpRequest, textStatus) {}
});
});
};
$(function() {
$("#mutifile").change(function () {
var filellist = new Array();
for (i = 0; i < this.files.length; i++) {
filellist.push(this.files[i]);
}
console.log(filellist);
let promises = filellist.map((item, index) => {
return uploadfilepromise(item);
});
// 并行执行
Promise.all(promises)
.then(() => {
if (fileret.length > 0) {
var html = "<h2>部分文件上传失败</h2><ul style='padding-left:22px;height:100%;overflow: scroll;color:#eeeeee;' class='bfw-align-l bfw-ul scrollbar'>";
for (var i = 0; i < fileret.length; i++) {
if (fileret[i].err) {
html += "<li>"+fileret[i].path+"<span style='color:red;'>上传失败:"+fileret[i].data+"</span></li>";
} else {
html += "<li>"+fileret[i].path+"<span style='color:green;'>上传成功</span></li>";
}
}
html += "</ul>";
$("#ret").html(html);
} else {
alert("全部上传成功");
}
fileret = null;
$("#mutifile").val("");
console.log('done')
})
.catch((e) => {
alert("上传出错");
console.log(e)
console.log('error')
})
});
});
</script>
<style>
</style>
</head>
<body>
<input type="file" id="mutifile" multiple="" />
<div id="ret"></div>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
