blueimp fileupload - 不会触发进度

Question

我有一个非常简单的上传脚本，但它不会触发进度..它只触发一次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>

Answer 1

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

即使是远程，我也只有三次调用才能获得10MB的文件。

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

Answer 2

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

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

否则你可以使用chucked上传。 但这仅适用于serval浏览器。 这是指定“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”-event。

blueimp fileupload - 不会触发进度

问题描述

测试

码

2 个解决方案

解决方案1
0 2017-06-20 10:44:43

解决方案2
0 2017-06-20 13:14:42

blueimp fileupload - 不会触发进度

问题描述

测试

码

2 个解决方案

解决方案1 0 2017-06-20 10:44:43

解决方案2 0 2017-06-20 13:14:42

解决方案1
0 2017-06-20 10:44:43

解决方案2
0 2017-06-20 13:14:42