jQuery文件上传进度条与浏览器不同步答案

【问题标题】：File upload progress bar with jQuery not in sync with BrowserjQuery文件上传进度条与浏览器不同步
【发布时间】：2019-07-29 00:48:08
【问题描述】：

我正在创建一个包含 4 种输入类型文件的表单。

对于进度条，我使用此处的代码和建议： AJAX upload showing progress of only file in multiple file uploads 它适用于小文件。

对于大文件（我每次上传MP3，每个文件时长为30-40分钟），上传百分比与浏览器检测到的不对应。

例如：当 4 个字段显示 100% 时，实际上浏览器仍在上传（在我的情况下，大约是 90%）请问我哪里错了？我可以同步浏览器和 jQuery 功能吗？请在我的代码下方：

<script>
    function postFile() {
        var formdata = new FormData();

        formdata.append('file1', $('#file1')[0].files[0]);
        formdata.append('file2', $('#file2')[0].files[0]);
        formdata.append('file3', $('#file3')[0].files[0]);
        formdata.append('file4', $('#file4')[0].files[0]);

        var request = new XMLHttpRequest();

        request.upload.addEventListener('progress', function (e) {
            var file1Size = $('#file1')[0].files[0].size;
            var file2Size = $('#file2')[0].files[0].size;
            var file3Size = $('#file3')[0].files[0].size;
            var file4Size = $('#file4')[0].files[0].size;

            if (e.loaded <= file1Size) {
                var percent = Math.round(e.loaded / file1Size * 100);
                $('#progress-bar-file1').width(percent + '%').html(percent + '%');
            } else if (e.loaded > file1Size && e.loaded <= (file1Size + file2Size)){
               $('#progress-bar-file1').width(100 + '%').html(100 + '%');
               var percent = Math.round((e.loaded / (file1Size + file2Size) * 100));
               $('#progress-bar-file2').width(percent + '%').html(percent + '%');
            } else if (e.loaded > (file1Size + file2Size) && e.loaded <= (file1Size + file2Size + file3Size)) {
               $('#progress-bar-file1').width(100 + '%').html(100 + '%');
               $('#progress-bar-file2').width(100 + '%').html(100 + '%');
               var percent = Math.round(e.loaded / (file1Size + file2Size + file3Size) * 100);
               $('#progress-bar-file3').width(percent + '%').html(percent + '%');
            } else if (e.loaded > (file1Size + file2Size + file3Size) && e.loaded <= (file1Size + file2Size + file3Size + file4Size)) {
               $('#progress-bar-file1').width(100 + '%').html(100 + '%');
               $('#progress-bar-file2').width(100 + '%').html(100 + '%');
               $('#progress-bar-file3').width(100 + '%').html(100 + '%');
               var percent = Math.round(e.loaded / (file1Size + file2Size + file3Size + file4Size) * 100);
               $('#progress-bar-file4').width(percent + '%').html(percent + '%');
            } else if (e.loaded > (file1Size + file2Size + file3Size + file4Size)) {
               $('#progress-bar-file1').width(100 + '%').html(100 + '%');
               $('#progress-bar-file2').width(100 + '%').html(100 + '%');
               $('#progress-bar-file3').width(100 + '%').html(100 + '%');
               $('#progress-bar-file4').width(100 + '%').html(100 + '%');
            }

            if(e.loaded == e.total){
                $('#progress-bar-file1').width(100 + '%').html(100 + '%');
                $('#progress-bar-file2').width(100 + '%').html(100 + '%');
                $('#progress-bar-file3').width(100 + '%').html(100 + '%');
                $('#progress-bar-file4').width(100 + '%').html(100 + '%');
            }
        });   

        request.open('POST', '/process.php);
        request.timeout = 1000000;
        request.send(formdata);
    }
</script>

HTML

<form method="POST" enctype="multipart/form-data" action="process.php ">

    <div class="field"><p class="File_n">Select File 1</p><input type="file" id="file1" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file1" class="progress" style="width:0%"></div>

    <div class="field"><p class="File_n">Select File 2</p><input type="file" id="file2" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file2" class="progress" style="width:0%"></div>

    <div class="field"><p class="File_n">Select File 3</p><input type="file" id="file3" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file3" class="progress" style="width:0%"></div>

    <div class="field"><p class="File_n">Select File 4</p><input type="file" id="file4" class="inputfile" name="file_name[]" value="Upload file" accept="audio/mp3"/></div>
    <div class="progress-wrapper"><div id="progress-bar-file4" class="progress" style="width:0%"></div>

    <input type="submit" id="continue" onclick="postFile()" value="SEND"  />
</form>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我认为问题的答案是：

<input type="submit" id="continue" onclick="postFile()" value="SEND"  />

您应该将输入类型修改为“按钮”。当您单击按钮时，会触发两个上传请求，一个正在提交表单，另一个正在发送您添加进度侦听的 ajax 请求。

【讨论】：