2013-06-03 146 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解决它。 现在进度条完美运作!