Blueimp 上传插件进度条错误

Posted 2023-05-07

【中文标题】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 来修复它。 现在进度条完美运行！