前端文件上传，异步，进度，文件过多等问题？

Question

项目描述

我正在开发一个多文件上传系统，用于我局域网，各种设备间的文件交换！

遇到了些问题

XMLHttpRequest 同步上传无法触发 progressFunction 方法（就是上传进度的事件）。（这个无解，我看了文档，确实是不会触发）

XMLHttpRequest 异步文件上传问题

异步文件上传会触发 progressFunction 但是我不知道它现在正在上传的是哪个文件，连文件信息我都没有看到，我就无法给指定的文件，显示它的上传进度。

我想要实现当多个文件被上传时，分别显现上传进度？问题就是无法获取到文件信息！不知道现在上传哪个文件。

    var uploadFile = function (files) {
        $(files).each(function () {
            var formData = new FormData();
            formData.append('file', this);
            xhr = new XMLHttpRequest();
            queue = this.name;
            xhr.open("post", "http://192.168.0.245:8877/up");
            xhr.onload = uploadComplete;
            xhr.onerror = uploadFailed;
            xhr.upload.onprogress = function (e) {
                console.info(e);
            }
            xhr.send(formData);
        })
    }

浏览器请求问题

我看浏览器是所有请求并发限制的，如果我这边同时上传1000个文件，这边就发请10000个异步请求，请问这个问题我可以不用管三，浏览器是有自动调节的功能的嘛，不会说出现1000个异步请求，就会导致浏览器宕机的问题嘛？

Answer 1

我先给你解释一下为什么同步上传无法触发 progress ， 因为 js 是单线程，同一时刻只能有一个在执行的任务。所以导致回调不会触发，其实不只是回调，整个页面都是无响应状态。

---

再回到另一个问题，异步的时候如何获取每一个文件的进度。这里一般是用闭包来实现。你的代码看上去也是一个闭包。$(files).each(function (file) { 这样，你在回调中访问 file 就是当前文件对象。

如果你用 vue 的话，感觉会更清晰

---

至于并发的问题。http2就可以了。如果是低版本需要域名分片等方案

Answer 2

完整代码

        $(files).each(function (temp) {
            var formData = new FormData();
            formData.append('file', this);
            xhr = new XMLHttpRequest();
            xhr.open("post", "http://192.168.0.245:8877/up");
            xhr.onload = uploadComplete;
            xhr.onerror = uploadFailed;
            xhr.upload.onprogress = function (e) {
                if (event.lengthComputable) {
                    var percent = Math.floor(event.loaded / event.total * 100);
                    console.info(temp + "进度:" + percent)
                }
            };
            xhr.send(formData);
        })

这段代码在上传过程中会输出

0进度:100
1进度:94
1进度:100

这里temp 能够准确的说明是哪个正在上传，上传进度信息。

如何文件信息？

 $(files).each(function (index,elem) {
            var formData = new FormData();
            formData.append('file', this);
            xhr = new XMLHttpRequest();
            xhr.open("post", "http://192.168.0.245:8877/up");
            xhr.onload = uploadComplete;
            xhr.onerror = uploadFailed;
            xhr.upload.onprogress = function (e) {
                if (event.lengthComputable) {
                    var percent = Math.floor(event.loaded / event.total * 100);
                    console.info(elem.name + "文件的进度:" + percent)
                }
            };
            xhr.send(formData);
        })