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

【问题标题】：Get upload progress of individual files with XMLHttpRequest使用 XMLHttpRequest 获取单个文件的上传进度
【发布时间】：2013-08-02 12:20:27
【问题描述】：

我正在使用 XMLHttpRequest（带有 jQuery）来获取多个文件的上传进度。通过向 XMLHttpRequest 对象添加“进度”事件侦听器，我可以获得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 完成此任务，那就太好了。任何有关这方面的信息将不胜感激。

【问题讨论】：

看看这个：How to get progress from XMLHttpRequest
谢谢，但我的脚本已经这样做了。我的意思是我想要每个单独文件的进度，而不是所有文件作为一个组。
那么每个请求只发送一个文件。
看起来好像 $.ajaxSettings.xhr() 对象是全局的。您没有创建它的唯一实例，那么它如何知道您指的是哪个文件？
@Gavin 您必须为每个要上传的文件运行$.post() 或$.ajax()。这是获取文件的单个 progress 事件的唯一方法。 progress 事件与完整的 XMLHttpRequest 相关，它不知道也不关心上传了多少不同的“部分”或“文件”；对于 XHR，它只是二进制的。因此，为了能够了解单个文件的进度，您必须在每个请求中只包含一个文件。

标签： javascript jquery xmlhttprequest

【解决方案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;
    }
});

【讨论】：

【解决方案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>

如果你尝试运行 sn-p，你会得到一个服务器错误，因为 page_where_upload 不存在！

【讨论】：