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

最新推荐文章于 2022-06-24 15:19:56 发布

haove

最新推荐文章于 2022-06-24 15:19:56 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript HTML CSS javascript

本文链接：https://blog.youkuaiyun.com/haove/article/details/77574449

javascript 同时被 2 个专栏收录

2 篇文章

订阅专栏

HTML CSS javascript

2 篇文章

订阅专栏

本文介绍了一种解决HTML5异步上传时文件重复的方法，通过将异步请求改为顺序执行的方式，确保了文件上传的正确性和避免了重复上传的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

前端采用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);
        }
    }
}