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做到这一点，那就太好了。任何关于此的信息将不胜感激。

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;
    }
});

Answer 2

您可以使用Javascript插件Dropzone.js。他逐个处理文件，显示每个文件的进度条，易于集成，支持移动，拖放，...

＆＃13;

php artisan make:auth

＆＃13;

如果您尝试运行代码段，则会出现服务器错误，因为 page_where_upload 不存在！

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

2 个答案: