请问js如何并发同时上传多个文件?
网友回复
使用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>