Question

我正在创建具有4个输入类型文件的表单。

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

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

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

JS

<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>

Answer 1

我认为问题的答案是：

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

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

jQuery的文件上传进度栏与浏览器不同步

1 个答案: