Question

我正在使用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％。

为什么表现如此？如何修复它以正确显示进度？

谢谢。

Answer 1

我也有文件进度条问题。奇怪的是，相同的实现适用于我开发的另一个站点，但不适用于另一个站点。奇怪的是，我努力寻找发生的事情几个小时。我在某处读到了另一个问题，blueimp在这里说它使用类似的设置测试得很好，有人提到他们有代理。好吧，我没有代理，但后来我在另一台计算机上检查了它。工作正常，另一台计算机再次正常工作。然后我在我的主电脑上禁用AVG，你不知道，工作正常。似乎启用AVG我的data.loaded几乎总是与data.total相同。我确定它与一些愚蠢的缓存或它们实现的东西有关，以“提高”你的浏览速度。

Answer 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);
    }
    ...
}

progressall中console.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 /

jquery文件上传进度条不准确

2 个答案: