Question

我目前正在开发一个文件上传器，它最终能够遍历多个文件，并通过预先循环遍历它们来计算要上传的总字节数。但是，我遇到了以下问题...

如果我比较target.files[n].size从文件输入返回的文件大小和XHR的上传进度监听器事件e.total返回的值，它们似乎不一样。 XHR的e.total有时会高出几百个字节。

有人可以解释为什么会这样吗？无论我使用什么浏览器来测试Javascript，都会发生这种情况。

<form enctype="multipart/form-data" method="post">
    <input type="file"  multiple="" />
</form>

function uploadfiles() {

    var files = $('input[type=file]').prop('files');
    var total_size = files[0].size;

console.log("size from file.size = " + total_size);

    var fd = new FormData();
    fd.append('file', files[0]);

    $.ajax({
        url: '/ajax/uploadfiles.php',
        type: 'post',
        processData: false,
        contentType: false,
        data: fd,
        dataType: 'json',
        xhr: function() {

            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e){
console.log("xhr size = " + e.total);
            }, false);
            return xhr;

        }
    }); // ajax

};

Answer 1

ProgressEvent 的 total 属性计算所有正文字节，对于文件上传，这通常意味着 multipart/form-data 编码。（参见 fetch standard 的第 4.5 节的第 6.6 步；同样适用于 XHR。）

如果您进行自己的编码，则可以提前计算正文总字节数，但我认为无法从 FormData 实例中确定它。仅使用 ProgressEvent 的 total 值而不是文件 size 要容易得多。

XHR上传进度事件总数与target.files大小不同？

1 个答案: