如何取消上傳單個文件，使用Blueimp jQuery文件上傳

Question

我正在使用Blueimp jQuery File Upload，它工作正常，但是我取消上傳其中一個文件時出現問題。

當我添加一個文件，我追加到一個額外的輸入和一個按鈕 - 「取消」的HTML一個字段集。我需要的是這樣的：

$(".cancelUpload").on("click", function(){ 
     //remove this file from the queue, The data and the file will not be uploaded 
}) 

這裏是我的代碼的一部分

$('#MappeFile').fileupload({ 
     dataType : 'json', 
     autoUpload : false, 
     maxNumberOfFiles : undefined, 
     maxFileSize : 2000, 
     minFileSize : undefined, 
     acceptFileTypes : /.+$/i, 
     url : "/ajax/UploadFile.php", 
     add : function(e, data) { 
      $("#fileUploadButton").removeClass("toHide").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.formData=$("form").serializeArray(); 
       data.submit(); 
       $("#fileUploadButton").off("click").addClass("toHide") 

      }) 
     }, 
     change : function(e, data) { 
      $.each(data.files, function(index, file) { 

       filesCount++; 
       vOutput = "<fieldset class='FileUploadFieldset'>" 
       vOutput += "<legend>" + file.name + "</legend>" 
       vOutput += "<label>Dateiname:</label><input type='text' value='"+file.name+"' name='Dateiname"+filesCount+"' size='50' class='UploadDateiName inputMaske'/><input type='text' class='toHide originName' name='originName"+filesCount+"' value='"+file.name+"'/>" 
       vOutput += "<label>Dokumentdatum</label><input type='text' name='Datum"+filesCount+"' class='UploadDatum inputMaske'>" 
       vOutput += "<label>Berater:</label><select name='Berater"+filesCount+"' class='UploadBeraterSelect inputMaske'></select>" 
       vOutput += "<fieldset><legend>Kategorie:</legend><div class='UploadKategorie'></div></fieldset>" 
       vOutput += "<fieldset><legend>Bemerkung:</legend><textarea name='Bemerkung"+filesCount+"' class='UploadBemerkung inputMaske'></textarea></fieldset>" 
       vOutput += "<input type='button' class='cancelUpload neuButton' value='cancel'/>" 
       vOutput += "</fieldset>" 
       $("#MappeFilesToUpload").append(vOutput); 
      }); 
     } 
    }); 

Answer 1

如果您正在使用fileupload-ui.js你只需要添加一個類「取消」，它會自動綁定取消處理程序。

嘗試更新該行：

vOutput += "<input type='button' class='cancelUpload neuButton' value='cancel'/>" 

到：

vOutput += '<div class="cancel"> <button> cancel </button> </div>' 

如果您使用只是核心插件來看看這行，看你需要做什麼。

從fileupload-ui.js：

_initEventHandlers: function() { 
     this._super(); 
     this._on(this.options.filesContainer, { 
      'click .start button': this._startHandler, 
      'click .cancel button': this._cancelHandler, 
      'click .delete button': this._deleteHandler 
     }); 
     this._initButtonBarEventHandlers(); 
    }, 

    . 
    . 
    . 

    _cancelHandler: function (e) { 
     e.preventDefault(); 
     var template = $(e.currentTarget).closest('.template-upload'), 
      data = template.data('data') || {}; 
     if (!data.jqXHR) { 
      data.errorThrown = 'abort'; 
      this._trigger('fail', e, data); 
     } else { 
      data.jqXHR.abort(); 
     } 
    },