使用XMLHttpRequest获取单个文件的上传进度

Question

我正在使用XMLHttpRequest（与jQuery一起）获取多个文件上传的进度。通过向XMLHttpRequest对象添加“progress”事件侦听器，我可以获取event.loaded和event.total。这些变量给出了所有文件组合的已加载和总字节数。

我想做的是获取每个单独文件的进度，但我所看到的信息似乎在XMLHttpRequest中不可用。这是真的吗？

我认为这甚至不是必要的，但这是我的代码：

var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
    xhr.upload.addEventListener('progress', function(event) {
        var percent = 0;
        var position = event.loaded || event.position;
        var total = event.total;
        if (event.lengthComputable) {
            percent = Math.ceil(position / total * 100);
        }
        updateProgressBar(percent);
    }, false);
}
return xhr;

如果我可以用XMLHttpRequest实现这个，那就太好了。如果有任何相关信息，我会很感激。

- Gavin

---

看看这个：如何从XMLHttpRequest中获取进度。 - Joe

谢谢，但我的脚本已经做到了。我的意思是我想要每个单独文件的进度，而不是所有文件作为一个组的进度。 - Gavin

每次请求只发送一个文件。 - Ray Nicholus

看起来 $.ajaxSettings.xhr() 对象是全局的。你没有创建一个唯一的实例，那么它怎么知道你正在引用哪个文件呢？ - Gavin

@Gavin，如果您想上传多个文件并获取每个文件的进度，则需要对每个文件运行一次$.post()或$.ajax()。这是获得各个文件进度事件的唯一方法。进度事件与完整的XMLHttpRequest相关，它不知道也不关心正在上传多少个不同的“部分”或“文件”；对于XHR来说，它只是二进制的。因此，为了能够知道每个文件的上传进度，您必须每次仅包含一个文件进行请求。 - idbehold

Answer 1

这是我使用的内容，

$.ajax({
    xhr: function () {
        myXhr = $.ajaxSettings.xhr();
        myXhr.addEventListener('progress', function (e) { }, false);
        if (myXhr.upload) {
            myXhr.upload.onprogress = function (e) {
                var completed = 0;
                if (e.lengthComputable) {
                    var done = e.position || e.loaded,
                        total = e.totalSize || e.total;
                    completed = Math.round((done / total * 1000) / 10);
                }
                console.log(completed); // Displays the completed percentage
            }
        }
        return myXhr;
    }
});

- Balaji Viswanath

Answer 2

您可以使用Javascript插件Dropzone.js。它逐个处理文件，为每个文件显示进度条，易于集成，支持移动设备、拖放等功能...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script>
<link rel="stylesheet" href="http://www.dropzonejs.com/css/dropzone.css" />
<link rel="stylesheet" href="http://www.dropzonejs.com/css/style.css" />

<form action="/page_where_upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

如果您尝试运行这段代码片段，您将会收到一个服务器错误，因为page_where_upload不存在！

- Camille