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를 사용하는 경우 내 코드의 일부이며 자동 바인드 될 것입니다 : 내가 필요한 것은이 같은 것입니다 cancelHandler.

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(); 
     } 
    },