Blueimp 上传插件进度条错误

     2023-05-07     225

关键词:

【中文标题】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... 查看详情