12

我正在使用 XMLHttpRequest（带有 jQ​​uery）来获取多个文件的上传进度。通过向 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 完成此操作，那就太好了。任何有关此的信息将不胜感激。

4

2 回答 2

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;
    }
});
于 2014-10-03T15:37:16.033 回答
0

您可以使用 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不存在！

于 2017-02-17T16:46:41.067 回答