正文

jquery文件上传进度条不准确

 2023-05-07  70

关键词：

【中文标题】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 /

【讨论】：

Dropzone.js 上传进度条不显示

...：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootstrap。上传文件后，如果我在Chrome中检查元素，我发现它及其父元素的高度均为0px：奇怪... 查看详情

带有进度条的 jQuery ajax 上传 - 没有 flash

】带有进度条的jQueryajax上传-没有flash【英文标题】：jQueryajaxuploadwithprogressbar-noflash【发布时间】：2011-02-1210:59:54【问题描述】：我正在寻找类似于uploadify的文件上传器，其进度条不依赖于Flash，最好使用jQuery-这可能吗？【问题... 查看详情

使用带有进度的 PHP Ajax 准确上传文件夹

】使用带有进度的PHPAjax准确上传文件夹【英文标题】：UploadaFolderExactlywithPHPAjaxwithProgress【发布时间】：2012-06-1506:58:28【问题描述】：我想使用PHP将一个完整的文件夹按原样上传到Web服务器。我们选择的目录如下：.\\|-Hello.txt|-Fil... 查看详情

JQuery 和 HTML5 音频进度条不起作用

】JQuery和HTML5音频进度条不起作用【英文标题】：JQueryandHTML5audioprogressbarnotworking【发布时间】：2012-07-2701:01:34【问题描述】：<html><head><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min 查看详情

jQuery 上传进度和 AJAX 文件上传

】jQuery上传进度和AJAX文件上传【英文标题】：jQueryUploadProgressandAJAXfileupload【发布时间】：2011-06-1822:04:45【问题描述】：我似乎没有清楚地表达我的问题。我需要发送一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取... 查看详情

jQuery 上传进度和 AJAX 文件上传

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

下载文件时进度条不显示剩余百分比？

】下载文件时进度条不显示剩余百分比？【英文标题】：progressbarnotshowremainingbypercentwhendownloadfile?【发布时间】：2021-10-2819:28:21【问题描述】：我在Angular8上工作，我遇到问题进度条不显示部分下载假设我下载数据然后20%然后40%... 查看详情

如何在jquery中计算文件上传进度？(代码片段)

我很难理解progress-bar的jquery-file-upload功能。以下代码段的含义是什么？.on('fileuploadprogressall',function(e,data)varprogress=parseInt(data.loaded/data.total*100,10);$('.progress.progress-bar').css('width',progress+'%'););问题是：如何计算进度？实际上，文件名... 查看详情

显示多文件上传 Jquery/Ajax 的进度

】显示多文件上传Jquery/Ajax的进度【英文标题】：ShowaprogressonmultiplefileuploadJquery/Ajax【发布时间】：2014-06-0619:04:36【问题描述】：我有允许用户上传多个文件的上传表单。我决定如果文件很大，进度条会很好。下面是我的源代码... 查看详情

使用 jquery ui 进度条上传文件

】使用jqueryui进度条上传文件【英文标题】：fileuploadwithjqueryuiprogressbar【发布时间】：2011-01-2015:13:55【问题描述】：我正在使用jCrop，我想为图片上传添加一个进度条，如何让jqueryui进度条加载图片字节？【问题讨论】：我相信这... 查看详情

如何不断更新我正在使用 JS 播放的这个 mp3 文件的持续时间？进度条不起作用

】如何不断更新我正在使用JS播放的这个mp3文件的持续时间？进度条不起作用【英文标题】：HowcanIconstantlyupdatethedurationofthismp3fileI\'mplayingwithJS?Theprogressbardoesnotwork【发布时间】：2011-07-0219:53:13【问题描述】：这是来自音频播放器... 查看详情

jquery上传文件显示进度条(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情