2013-06-03 147 views
2

我有一個表格,我使用blueimp上傳插件上傳文件。 上傳過程正常。我只需要在上傳事件中添加一個進度條。 我曾嘗試使用blueimp文檔中指定的progressall回調函數,但我所得到的結果都是100%加載的,因爲data.loaded總是等於data.totalBlueimp上傳插件進度條錯誤

我已經看到,該插件僅在done回調和done回調之後處理progressall回調,我有幾個動作發生。

參見下面的示例:

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

回答

2

我設法通過註釋掉forceIframeTransport: true解決它。 現在進度條完美運作!