html5 multiple多文件异步上传 服务器接收文件重复

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/haove/article/details/77574449

背景

前端采用html5异步上传，后端采用Struts1接收文件。接收到的文件存在重复的问题。

解决

1.将异步上传改为同步上传，但不推荐这么改；

xhr.open("POST", url,false);

2.采用程序控制方式，在前一个上传完才开始上传下一个，产生一个个顺序上传的效果，上传接口仍旧用异步方式，通过递归方式实现：

//上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
    var picFileList = $("#pic").get(0).files;
    doUpload(picFileList,0);
}
function doUpload(files,i){
    if(files){
        if(i<files.length){
            var xhr = new XMLHttpRequest();
            var formData = new FormData();
            var file = files[i];
            formData.append("file", file);
            xhr.upload.addEventListener("progress", onprogress, false);
            xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
            xhr.addEventListener("load",function(e){doUpload(files,i+1);},false);
            xhr.open("POST", url);
            //记得加入上传数据formData
            xhr.send(formData);
        }
    }
}