jquery文件上传进度条不准确

Posted 2023-05-07

【中文标题】jquery文件上传进度条不准确

【英文标题】：jquery file upload progress bar inaccurate

【发布时间】：2014-04-30 20:45:07

【问题描述】：

我正在使用 jquery 文件上传 (http://blueimp.github.io/jQuery-File-Upload/) 插件。

我的代码：

$('#fileupload').fileupload(
    url: 'server/index.php',
    dataType: 'json',
    dropZone: $('#dropzone'),
).bind('fileuploadprogress', function (e, data) 
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('.progress-bar').css('width', progress + '%');
);

当我进行文件上传时，进度条非常不准确。每次上传，无论文件大小，进度条都会一直停留在10%左右，直到文件上传完成，然后直接上到100%。

为什么会这样？如何修复它以正确显示进度？

谢谢。

【问题讨论】：

您正在测试的文件有多大，您是否在远程而不是本地进行了测试，因为带宽 == 磁盘访问带宽，文件将立即上传到本地。

@thetrompf 是的，起初我在本地进行测试。感觉一切都很完美。但是，当我尝试使用托管服务器时，我遇到了问题中描述的问题。

您使用的是哪个浏览器和网络服务器？

@thetrompf Firefox 和 Dreamhost。也用 IE 11 测试过，也不准确。文件刚开始上传时，进度条立即从 0% 变为 100%。

您正在测试的文件的大小是多少？进度回调是基于时间间隔调用的，如果在小文件上调用的频率不够高，它似乎会立即从 0 变为 100，或者您可能只是使用了太小的文件而无法满足您的带宽。所以文件会在第一个fileprogress回调被调用之前上传。

【参考方案1】：

我也遇到了文件进度条问题。奇怪的是，相同的实现可以在我开发的另一个站点上运行，但在另一个站点上却不行。尽管可能很奇怪，但我挣扎了几个小时试图找出发生了什么。我在某个地方读到了另一个问题，blueimp 说它使用类似的设置测试得很好，有人提到他们有一个代理。好吧，我没有代理，但后来我在另一台计算机上检查了它。工作正常，另一台计算机再次正常工作。然后我在我的主计算机上禁用了 AVG，你不知道，工作正常。似乎启用 AVG 后，我的 data.loaded 几乎总是与 data.total 相同。我确信这与一些愚蠢的缓存或他们为“提高”您的浏览速度而实施的某些东西有关。

【讨论】：

好发现，它为我节省了大量的调试时间。

【参考方案2】：

问题在于，当您使用默认的autoUpload 选项时，文件会立即在add 回调中提交，而对于第一个n 调用progressall 回调，data.total 不会完全更新。 （n 取决于工作站速度和progressInterval 选项）

我找到的解决方案是在add 的第一次调用中计算总文件长度并在progressall 中使用它。

var originalAdd = $.blueimp.fileupload.prototype.options.add;
var iFilesCount = 0;
var dataTotal = 0;

$('#fileupload').fileupload(
    ...
    progressall: function (e, data) 
        if (dataTotal == 0) 
            dataTotal = 1;
        
        var iProgress = parseInt(data.loaded / dataTotal * 100, 10);
        $('#progress .progress-bar').css('width', iProgress + '%');
    ,
    add: function (e, data) 
        if (iFilesCount <= 0) 
            iFilesCount = data.originalFiles.length;
            dataTotal = 0;
            var i = 0;
            // sum up files lengths
            for (i=0; i < iFilesCount ;i++)
                dataTotal = dataTotal + data.originalFiles[i].size;
            
        
        iFilesCount--;
        // recall default add callback
        originalAdd.call(this, e, data);
    
    ...

progressallprogressallconsole.log(data.loaded + ' / ' + data.total + ' / ' + dataTotal) 的输出

  536710 /  1610128 / 30060524 \
 1073418 /  6977218 / 30060524 |
 1610128 /  8587402 / 30060524 |
 2146838 / 12881204 / 30060524 |
 2683550 / 13954660 / 30060524 |
 3220258 / 16638300 / 30060524 |-- progress bar is not accurate
 3756968 / 19858646 / 30060524 |
 4293676 / 24689178 / 30060524 |
 4830384 / 27909544 / 30060524 /
 5367092 / 30060524 / 30060524 \
 5903800 / 30060524 / 30060524 |
 6440510 / 30060524 / 30060524 |
 6977218 / 30060524 / 30060524 |
 7513946 / 30060524 / 30060524 |
 8050674 / 30060524 / 30060524 |-- accurate progress bar
 ...                           |
 ...                           |
30060524 / 30060524 / 30060524 /