Jqueryfileupload BlueImp使用sendAPI上傳多個文件

Question

我試圖用一個ajax調用發送多個文件。 問題是我不能讓我的進度制定出越來越此行

TypeError: data.context is undefined 
data.context.find('input').val(progress).change(); 

無法弄清楚如何管理與sendAPI每個TPL進度>？我搜索了很多嘗試不同的事情做，這是根本原因我想要一個Ajax請求，並在請求完成後有控制權。

MYHTML 


<form id="upload" method="post" action="upload.php" enctype="multipart/form-data"> 
     <div> 

      <div id="drop"> 
       Drop Here <span style="color:white;text-transform:none;font-size: 13px">  OR <span> 

        <a>Browse</a> 
        <input type="file" name="upl[]" multiple/> 


        </div> 

        <ul> 
         <!-- The file uploads will be shown here --> 
        </ul> 
        </div> 
        </form> 



MY JQUERY 

// Initialize the jQuery File Upload plugin 
     $('#upload').fileupload({ 
      disableImageResize: /Android(?!.*Chrome)|Opera/ 
        .test(window.navigator && navigator.userAgent), 
      imageMaxWidth: 100, 


      imageMaxHeight: 100, 
      maxFileSize: 5000000, 
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 
      dropZone: $('#drop'), 
      add: function(e, data) { 

        var type = data.files[0].type; 
      var size = data.files[0].size; 
      if (type == 'image/jpeg' || type == 'image/png' || type == 'image/gif') { 

       if(size<=350000000) 
       { 
       // var preview = '<img src="' + URL.createObjectURL(data.files[0]) + '"/>'; 
       var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' + 
         ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><div class="preview"></div><p></p><span></span></li>'); 
       tpl.find('p').text(data.files[0].name).append('<i>' + formatFileSize(data.files[0].size) + '</i>'); 
       loadImage(data.files[0], 
         function(img) { 
          tpl.find('.preview').html(img); 
         }, 
         { 
          minWidth: 80, 
          minHeight: 60, maxWidth: 80, maxHeight: 60, contain: true} // Options 
       ); 


       // Add the HTML to the UL element 
       data.context = tpl.appendTo(ul); 

       // Initialize the knob plugin 
       tpl.find('input').knob(); 

       // Listen for clicks on the cancel icon 
       tpl.find('span').click(function() { 

        if (tpl.hasClass('working')) { 
         jqXHR.abort(); 
        } 

        tpl.fadeOut(function() { 
         tpl.remove(); 
        }); 

       }); 

       myfiles.push(data.files[0]); 

      } else{ 
       noty({type:'error',text: 'file exceeds limit of 350Kb'}); 
      }//check for file type 

      } else 
      { 
       noty({type:'error',text: 'Invalid file type.Please make sure image has valid extension jpeg|gif|jpg'}); 
      } 


    //   $('#post_picture').on('click',function(){ 
    //    
    //   
    //    
    //   var jqXHR = data.submit().success(function (result, textStatus, jqXHR) {ar.push(result)}); 
    //    
    //    
    //    tpl.fadeOut(function() { 
    //     tpl.remove(); 
    //    }); 
    //   $('#post_picture').off('click'); 
    //   
    //    
    //    
    //   }); 






      }, 
      complete:function(e,data) 
      { 


      }, 
      progress: function(e, data) { 

      // Calculate the completion percentage of the upload 
      var progress = parseInt(data.loaded/data.total * 100, 10); 

      // Update the hidden input field and trigger a change 
      // so that the jQuery knob plugin knows to update the dial 
      data.context.find('input').val(progress).change(); 

      if (progress == 100) { 
       data.context.removeClass('working'); 
      } 
      }, 
      fail: function(e, data) { 
      // Something has gone wrong! 
      data.context.addClass('error'); 
      } 




     }); 

     $(document).on('click','#post_picture',function(){ 
      alert('asdas'); 
    $('#upload').fileupload('send', {files: myfiles}); 
     }); 

Answer 1

這就是我爲什麼會做這些天沒有身體的答案:)

var myfiles = []; 


    // Initialize the jQuery File Upload plugin 
    $('#upload').fileupload({ 
     disableImageResize: /Android(?!.*Chrome)|Opera/ 
       .test(window.navigator && navigator.userAgent), 
     imageMaxWidth: 100, 
     imageMaxHeight: 100, 
     maxFileSize: 5000000, 
     acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 
     dropZone: $('#drop'), 
     add: function(e, data) { 




     var type = data.files[0].type; 
     var size = data.files[0].size; 
     if (type == 'image/jpeg' || type == 'image/png' || type == 'image/gif') { 

      if (size <= 350000000) 
      { 
       // var preview = '<img src="' + URL.createObjectURL(data.files[0]) + '"/>'; 
       var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' + 
         ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><div class="preview"></div><p></p><span></span></li>'); 
       tpl.find('p').text(data.files[0].name).append('<i>' + formatFileSize(data.files[0].size) + '</i>'); 
       loadImage(data.files[0], 
         function(img) { 
          tpl.find('.preview').html(img); 
         }, 
         { 
          minWidth: 80, 
          minHeight: 60, maxWidth: 80, maxHeight: 60, contain: true} // Options 
       ); 


       // Add the HTML to the UL element 
       data.context = tpl.appendTo(ul); 

       // Initialize the knob plugin 
       tpl.find('input').knob(); 
       // Listen for clicks on the cancel icon 
       tpl.find('span').click(function() { 


       if (tpl.hasClass('working')) 
       { 

       data=''; 

       } 

        tpl.fadeOut(function() { 
        tpl.remove(); 
        }); 

       }); 

       // myfiles.push(data.files[0]); 

      } else { 
       noty({type: 'error', text: 'file exceeds limit of 350Kb'}); 
      }//check for file type 

     } else 
     { 
      noty({type: 'error', text: 'Invalid file type.Please make sure image has valid extension jpeg|gif|jpg'}); 
     } 


     $('#post_picture').on('click', function() { 


       if(data!='') 
       { 
      var jqXHR = data.submit().success(function(result, textStatus, jqXHR) { 
      }); 
       } 


      tpl.fadeOut(function() { 
       tpl.remove(); 
      }); 
      $('#post_picture').off('click'); 
     }); 






     }, 
     stop: function(e) { 
     console.log(myfiles); 
     }, 
     progress: function(e, data) { 

     // Calculate the completion percentage of the upload 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     // Update the hidden input field and trigger a change 
     // so that the jQuery knob plugin knows to update the dial 
     data.context.find('input').val(progress).change(); 
     if (progress == 100) { 
      data.context.removeClass('working'); 
     } 
     }, 
     fail: function(e, data) { 
     // Something has gone wrong! 
     data.context.addClass('error'); 
     } 




    }).on('fileuploaddone', function(e, data) { 

    myfiles.push(data.result); 

    });