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

【问题标题】：XHR upload progress event total different from target.files size?XHR 上传进度事件总数与 target.files 大小不同？
【发布时间】：2018-08-08 21:54:21
【问题描述】：

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

如果我比较 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
                
};

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/ProgressEvent/total “当使用 HTTP 下载资源时，这仅代表内容本身，而不是标头和其他开销。” 因此，相反，上传会计算标头和开销。
感谢您的快速回复。有什么办法可以解释这种开销，以便我可以为将单独上传的多个文件获得整体进度值......？
很遗憾，我不得不向您介绍另一位开发人员，因为我自己从未处理过进度处理。
好的，我想无论如何我都有一个解决方法，但是，如果存在一种计算标题开销的正确方法，那当然会更好。您没有将文档作为答案留下，因此我无法将其标记为已接受。
@Taplar 它不包含标题；差异来自编码。看我的回答。

标签： javascript jquery xmlhttprequest jqxhr

【解决方案1】：

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

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

【讨论】：