使用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>
网友回复
我知道答案，我要回答
私活外包
最新提问
DLNA与UPnP的区别和不同？
苏超自建抢票app，通过先预约再抽签化解高并发抢票？
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？
如何结合python+js如何自己的视频编码与加密播放直播？
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？
有没有可免费观看全球电视台直播m3u8地址url的合集？
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？
python如何实时检测电脑usb插入检测报警？
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？
