2012-11-09 115 views
10

我使用的是bluimp jQuery-File-Upload-plugin。選擇一些文件並上傳它們是沒有問題的,但是當我想上傳另一個文件而不刷新頁面時,第一個文件會再次上傳。我的問題是如何在上傳後「取消」文件。這是我的源代碼如何用blueimp文件上傳插件只上傳一次文件?

的Javascript:

$('#MappeFile').fileupload({ 
     dataType : 'json', 
     autoUpload : false, 
     maxNumberOfFiles : undefined, 
     maxFileSize : 6000000, 
     minFileSize : undefined, 
     acceptFileTypes : /.+$/i, 
     url : "/ajax/UploadFile.php", 
     add : function(e, data) { 
      $("#testUploadButton").on("click", function() { 
        $('#progress .bar').show(); 
        if ($.browser.msie && parseInt($.browser.version, 10) < 10) { 
         $('#progress .bar').css({ 
          "background" : "url(images/progressbar.gif) no-repeat", 
          "width" : "100%" 
         }) 
        } else { 
         $('#progress .bar').css({ 
          'background-color' : "#2694E8", 
          'width' : '0%' 
         }); 
        } 
       data.submit(); 
      }) 
     }, 
     change : function(e, data) { 
      $.each(data.files, function(index, file) { 
       console.info('Selected file: ' + file.name); 
       filesCount++; 
      }); 
     }, 
     drop: function(e, data) { 
      $.each(data.files, function(index, file) { 
       console.info('Selected file: ' + file.name); 
       filesCount++; 
      }); 
     }, 
     done : function(e, data) { 
      $.each(data.result, function(index, file) { 
       vOutput = "<tr>"; 
       vOutput += "<td>" + file + "</td>"; 
       vOutput += "<tr>"; 
       $("#MappeFileListe").append(vOutput); 
       filesUploaded++; 
       if (filesCount == filesUploaded) { 
        filesUploaded = 0; 
        filesCount=0; 
        $('#progress .bar').hide(); 
       } 
      }); 
     }, 
     progressall : function(e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#progress .bar').css('width', progress + '%'); 
     } 
    }); 

HTML:

<div id="KundeMappe"> 
    <form id="MappeFile"> 
     <input type="file" id="MappeFileSelect" name="files[]" data-url="ajax/UploadFile.php" multiple/> 
     <div id="progress"> 
      <div class="bar" style="width: 0%;"></div> 
     </div> 
     <input type="button" class="neuButton" value="upload" id="testUploadButton"/> 
    </form> 
    <table id="MappeFileListe"></table> 
</div> 

回答

19

,我發現自己的答案 - 這足以上傳後解除綁定按鈕的單擊事件:

add : function(e, data) { 
      $("#testUploadButton").on("click", function() { 
        $('#progress .bar').show(); 
        if ($.browser.msie && parseInt($.browser.version, 10) < 10) { 
         $('#progress .bar').css({ 
          "background" : "url(images/progressbar.gif) no-repeat", 
          "width" : "100%" 
         }) 
        } else { 
         $('#progress .bar').css({ 
          'background-color' : "#2694E8", 
          'width' : '0%' 
         }); 
        } 
       data.submit(); 
       $("#testUploadButton").off("click") 
      }) 
     }, 
+1

我有同樣的問題。但用你的解決方案,它只是壓制所有其他請求,仍然分配內存。如何限制文件的數量,以避免將選定的文件添加到上傳隊列?設置'maxNumberOfFiles:1'不適用於我。 – static

+1

在新的'$(「#testUploadButton」)之前設置'$(「#testUploadButton」)。off(「click」)'on(「click」,function(){...} ? – static

+3

你的解決方案似乎並不是正確的答案,但它爲我做了訣竅非常感謝 – VahidNaderi

相關問題