Blueimp 업로드 플러그인 진행률 오류

Question

나는 blueimp 업로드 플러그인을 사용하여 파일을 업로드하는 양식이 있습니다. 업로드 프로세스가 정상적으로 작동합니다. 내가 원하는 것은 업로드 이벤트에 진행 막대를 추가하는 것입니다. 나는 progressall 콜백을 사용하려고했는데, data.loaded은 항상 data.total과 같으므로, 나는 얻을 수있는 모든 것이 100 %로드된다.

나는 플러그인 만 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"); 
     } 
    }); 

Answer 1

나는 forceIframeTransport: true을 주석에 의해 그것을 해결하기 위해 관리. 이제 진행률 막대가 완벽하게 작동합니다!