【问题标题】：blueimp fileupload - doesn't trigger the progressblueimp fileupload - 不会触发进度
【发布时间】：2017-11-13 15:01:42
【问题描述】：

我有一个非常简单的上传脚本，但它不会触发进度。它只会触发一次progress 方法，当文件完成时它会触发complete 并打印done!

Chrome 58.0.3029.110 (64-bit)
Firefox 53.0.3 (32-bit)

也尝试上传较大的文件，但progress方法仍然只触发一次

https://github.com/blueimp/jQuery-File-Upload

测试

http://dyndev.dk/upload/

代码

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
        <script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
        <script src="/upload/js/blueimp/jquery.fileupload.min.js"></script>
        <form id="upload_form" enctype="multipart/form-data" method="post" action="/upload/">
            <input id="upload_input" type="file" name="files[]">
            <input type="hidden" name="send" value="1">
        </form>
        <div id="upload_console"></div>
        <script>
            'use strict';
            
            $(function(){
                var div = $('#upload_console')
                $('#upload_form').fileupload({
                    fileInput : $('#upload_input'),
                    progress : function(e, data){
                        //console.log(data.loaded);
                        //console.log(parseInt(data.loaded / data.total * 100, 10));
                        div.append('<div>'+data.loaded+'</div>')
                    },
                    complete : function(e, data){
                        //console.log('done');
                        div.append('<div>done!</div>')
                    }
                });
            });
        </script>
    </body>
</html>

【问题讨论】：

为我工作（演示站点）。您使用的是哪个浏览器？据此：github.com/blueimp/jQuery-File-Upload/wiki/… 它可能无法在某些浏览器中运行。
我使用 Chrome 版本 58.0.3029.110（64 位）
你试过我的测试了吗？
是的，我试过了。
在 Firefox 和 Chrome 中试过了.. 不行

标签： javascript jquery file-upload blueimp jqxhr

【解决方案1】：

我认为您的测试场景不起作用的原因是默认的块大小为 10 MB。

你也可以试试“fileuploadprogress”-Event:https://github.com/blueimp/jQuery-File-Upload/wiki/Extended-progress-information

否则，您可以使用卡盘上传。但这仅适用于薮浏览器。这是指定“maxChunkSize”的关键。然后触发额外的回调：

$('#fileupload').fileupload({maxChunkSize: 100000})
    .on('fileuploadchunksend', function (e, data) {})
    .on('fileuploadchunkdone', function (e, data) {})
    .on('fileuploadchunkfail', function (e, data) {})
    .on('fileuploadchunkalways', function (e, data) {});

在这里，您可以尝试将 maxChunkSize 减小到 5000 (500 KB) - 但仅适用于您的测试场景。在生产环境中，您应该使用更大的块大小。

https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads

当用户能够选择多个文件进行上传并且您想通知他每个文件上传的进度时，您可以使用“fileuploadprocessalways”事件。

【讨论】：

【解决方案2】：

它适用于我在同一个 Firefox 53.0.3 中。也许您的问题是您在本地上传，所以速度太快而无法显示任何进度？

即使是远程的，我也只收到三个调用来处理 10MB 文件的进度。

尝试使用其他连接，或限制上传速度。

【讨论】：