关键词:
【中文标题】Blueimp 上传插件进度条错误【英文标题】:Blueimp upload plugin progressbar error 【发布时间】:2013-05-29 11:54:19 【问题描述】:我有一个使用 blueimp 上传插件上传文件的表单。
上传过程正常。我想要的只是在上传事件中添加一个进度条。
我尝试使用 blueimp 文档中指定的 progressall
回调,但我得到的只是 100% 加载,因为 data.loaded
始终等于 data.total
。
我已经看到插件仅在 done
回调之后处理 progressall
回调,并且在 done
回调中我有几个动作发生。
请参阅下面的示例:
$("#uploadFile" + docId).fileupload(
url: my url to the upload script,
dataType : 'json',
type: 'POST',
formAcceptCharset: 'utf-8',
forceIframeTransport: true,
progressInterval: 100,
bitrateInterval: 500,
autoUpload: true,
progressall: function (e, data)
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress'+docId+' .bar').css(
'width',
progress + '%'
).text(progress + '%');
,
send : function(e, data)
if(data.files[0].size <= 9000000000)
var docId = $(this).attr("data-course-id");
$("#uploadFileForm"+docId+" .uploadProgress").removeClass("hidden");
$("#uploadFeedback").html("");
else
$("#uploadFeedback").html(file is too big);
return false;
,
fail : function(e, data)
console.log("error = " + data.errorThrown);
return false;
,
done : function(e, data)
var metaSuggestions = data.result;
$("#uploadFileForm"+docId+" .uploadProgress").addClass("hidden");
//enable save button
$("#fileUploadSubmit"+ docId).removeClass("buttonDisabled");
$("#fileUploadSubmit"+ docId).removeAttr("disabled");
//populate fields
$("#fileUploadedId"+docId).val(metaSuggestions.uploadedDocId);
$("#fileDuration"+docId).val(metaSuggestions.lengthMiliseconds/1000 + " s");
$("#fileMediaType"+docId).val(metaSuggestions.mediaType);
//change cancel action
$("#fileUploadCancel"+ docId).unbind("click").click(function()
var successCallbackCancel = function(data)
$("#uploadFileForm"+ docId).addClass("hidden");
var errorCallbackCancel = function(error)
console.log(error);
cancelAddFile(contextPath, docId, metaSuggestions.uploadedDocId, successCallbackCancel, errorCallbackCancel);
);
$("#fileUploadSubmit"+docId).unbind('click').click(function()
var successCallbackSubmit = function(data)
$("#uploadFileForm" + docId).addClass("hidden");
//append file to files container
var fileContainer = $("#files" + docId);
appendFilesToContainer(data, docId);
var errorCallbackSubmit = function(error)
console.log(error);
submitFiles(contextPath, docId, metaSuggestions, successCallbackSubmit, errorCallbackSubmit);
);
console.log("file done");
);
【问题讨论】:
【参考方案1】:我设法通过注释掉 forceIframeTransport: true
来修复它。
现在进度条完美运行!
【讨论】:
Blueimp jquery 文件上传 - 上下文中的进度回调,最后一个不更新
】Blueimpjquery文件上传-上下文中的进度回调,最后一个不更新【英文标题】:Blueimpjqueryfileupload-progresscallbackincontext,lastonedoesn\'tupdate【发布时间】:2012-10-2917:18:33【问题描述】:我用的是:https://github.com/blueimp/jQuery-File-Upload(基... 查看详情
基于jquery很牛x的批量上传插件
...、可批量上传自定义格式文件1、jQueryFileUpload官网:http://blueimp.github.com/jQuery-File-Upload/在线 查看详情
Jquery File Upload blueimp 无法更改错误消息文本
】JqueryFileUploadblueimp无法更改错误消息文本【英文标题】:JqueryFileUploadblueimpcannotchangeerrormessagetext【发布时间】:2017-09-0310:50:34【问题描述】:我正在使用blueimp著名的jquery文件上传插件在我的服务器上上传文件。我想将错误消息... 查看详情
基于jquery插件uploadify实现实时显示进度条上传图片
...文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考一下先了解了解Uploadify,具体内容如下Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,... 查看详情
webuploader插件单个文件上传(带进度条)
@{ViewBag.Title="主页";}<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script><linkhref="~/Scripts/1/bootstrap.css"rel="stylesheet"/><linkhref="~/Scripts/1/webuploader.css"rel="styles 查看详情
jQuery 文件上传插件 - 开始/取消按钮和进度条不起作用
】jQuery文件上传插件-开始/取消按钮和进度条不起作用【英文标题】:jQueryfileuploadplugin-Start/CancelbuttonandProgressbardonotwork【发布时间】:2014-02-0913:18:17【问题描述】:在文档事件就绪时,问题是:TypeError:this.element.find(...).find(...).ea... 查看详情
BlueImp 文件上传“错误:方法不允许” - Laravel 4 路由问题
】BlueImp文件上传“错误:方法不允许”-Laravel4路由问题【英文标题】:BlueImpFileUpload"Error:MethodNotAllowed"-Laravel4RoutingIssue【发布时间】:2014-09-2607:14:52【问题描述】:我正在使用Blueimp.jqueryfile-upload进行文件上传。我的应用... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】:FileuploadprogressbarwithjQuery【发布时间】:2013-03-0220:39:19【问题描述】:我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】:FileuploadprogressbarwithjQuery【发布时间】:2013-03-0220:39:19【问题描述】:我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
尝试使用 blueimp jquery 上传小部件上传时出现 405(不允许的方法)错误
】尝试使用blueimpjquery上传小部件上传时出现405(不允许的方法)错误【英文标题】:405(MethodNotAllowed)errorwhiletryingtouploadwithblueimpjqueryuploadwidget【发布时间】:2015-03-1312:51:10【问题描述】:我想使用blueimpjquery上传小部件的基本版... 查看详情
带进度条的文件上传?
】带进度条的文件上传?【英文标题】:Fileuploaderwithprogressbar?【发布时间】:2011-09-1108:01:12【问题描述】:如何创建带有进度条的HTML/PHP/AJAX文件上传器?我不知道从哪里开始。【问题讨论】:【参考方案1】:我用过Uploadify。易... 查看详情
在Android中上传带有进度条且没有OutOfMemory错误的大文件
】在Android中上传带有进度条且没有OutOfMemory错误的大文件【英文标题】:UploadlargefilewithprogressbarandwithoutOutOfMemoryErrorinAndroid【发布时间】:2014-05-1711:19:16【问题描述】:上传大型视频文件(最大150MB)时遇到问题1.当我使用此代码... 查看详情
maxNumberOfFiles 在 blueimp jQuery 文件上传中无法正常工作
】maxNumberOfFiles在blueimpjQuery文件上传中无法正常工作【英文标题】:maxNumberOfFilesnotworkingproperlyinblueimpjQueryFileUpload【发布时间】:2014-05-2616:18:20【问题描述】:我正在使用带有CodeIgniter的jQuery文件上传插件(http://blueimp.github.io/jQuery-... 查看详情
Dropzone.js 上传进度条不显示
】Dropzone.js上传进度条不显示【英文标题】:Dropzone.jsuploadprogressbarnotshowing【发布时间】:2014-05-2003:02:57【问题描述】:我正在使用Dropzone.js进行文件上传,它运行良好,只是没有出现进度条。没有错误。我在网站的前端使用Bootst... 查看详情
.NET Web API Blueimp 多文件上传错误“MIME 多部分流意外结束。MIME 多部分消息不完整。”
】.NETWebAPIBlueimp多文件上传错误“MIME多部分流意外结束。MIME多部分消息不完整。”【英文标题】:.NETWebAPIBlueimpmultiplefileuploaderror"UnexpectedendofMIMEmultipartstream.MIMEmultipartmessageisnotcomplete."【发布时间】:2021-05-1819:00:01【问题... 查看详情
使用引导进度条以模态显示上传进度
】使用引导进度条以模态显示上传进度【英文标题】:DisplayUploadProgressinModalwithBootstrapProgressBar【发布时间】:2015-04-2003:01:02【问题描述】:我正在构建一个c#MVC应用程序,它显示一个表单并允许用户上传一些文件。当用户点击提... 查看详情
使用 jQuery File Upload 上传超过 1GB 到 2GB 的大文件 - blueimp(基于 Ajax)php / yii 它在 Firefox 浏览器中显示错误
】使用jQueryFileUpload上传超过1GB到2GB的大文件-blueimp(基于Ajax)php/yii它在Firefox浏览器中显示错误【英文标题】:uploadalargefileover1GBto2GBusingjQueryFileUpload-blueimp(Ajaxbased)php/yiiitshowingerrorinFirefoxBrowser【发布时间】:2016-03-0612:17:08【问题... 查看详情
Extjs文件上传进度
】Extjs文件上传进度【英文标题】:Extjsfileuploadprogress【发布时间】:2013-01-0414:16:50【问题描述】:我在ExtJS4中看到过表单文件上传示例,我需要自定义文件上传的进度。我看到了waitMsg配置属性,但我不想使用它,也不想使用extj... 查看详情