Blueimp上传插件进度栏错误 [英] Blueimp upload plugin progressbar error

问题描述

我有一个表单，可以在其中使用blueimp上载插件上载文件. 上传过程正常.我想要的只是向上传事件添加进度条. 我尝试使用blueimp文档中指定的progressall回调，但是我得到的都是100％加载，因为data.loaded始终等于data.total.

I have a form where I am uploading files using the blueimp upload plugin. The upload process work ok. All I want is to add a progress bar to the upload event. I have tried using the progressall callback specified in the blueimp documentation but all I get is 100% loaded, as data.loaded is always equal to data.total.

我已经看到插件仅在done回调之后才处理progressall回调，并且在done回调内部，我发生了一些动作.

I have seen that the plugin handles the progressall callback only after the done callback, and inside the done callback I have several actions taking place.

请参见以下示例:

$("#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");
       }
    });

推荐答案

我设法通过注释掉forceIframeTransport: true来修复它. 现在进度条可以正常工作了！

I managed to fix it by commenting out forceIframeTransport: true. Now the progress bar works perfectly!

这篇关于Blueimp上传插件进度栏错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！