blueimp 버튼을 선택 (파일 추가) 후 내가 선택한 파일을 표시하고 업로드

Question

전에 다음과 같은 라이브러리 https://github.com/blueimp/jQuery-File-Upload/wiki

을 사용하고 1 개 파일을 삭제하는 방법을 JQuery와 파일 업로드. 취소 버튼 또는 업로드를 보여주는 데모 격자가 표시되지 않습니다.

제출할 버튼이 있습니다 (아래 참조). 업로드 버튼을 선택하기 전에 선택한 파일 중 하나의 업로드를 취소하고 싶습니다.

코드를 살펴보면 마침내 제출을 클릭하면 업로드 된 각 파일에 대해 fileuploadsubmit가 호출됩니다.

사용자 격자에 선택된 파일을 표시하고 싶습니다. 그런 다음 데이터에서 제거 할 링크를 선택하여 파일 중 하나를 취소 할 수 있습니다. 내가 찾던 모든 샘플은 parent(). remove()를 사용하여 시각적 인 격자에서 제거하는 경향이 있습니다.

그리드를 표시하지 않고 어떻게 할 수 있습니까?

즉 ..

   ... 
       add: function (e, data) { 

       $.each(data.files, function (index, file) { 
        files += file.name; 
       }); 
       $('#files').text(files); 

       viewModel.Add(data); 

       data.context = $('#btnUpload') 
        .click(function() { 
         data.submit(); 
         return false; 
        }); 
      }, 
      ...... 


      $('#fileupload').bind('fileuploadsubmit', function (e, data) { 
      // The example input, doesn't have to be part of the upload form: 
      //var input = $('#input'); 
      //data.formData = {example: input.val()}; 

      var countryId = 1; //viewModel.selectedCountry().CountryId() 
      var selected = 'test'; //$('#lstTemplate option:selected').text(); 

      data.formData = { templateType: selected, countryId: countryId }; 
      if (data.formData.templateType == 'Select') { 
       data.context.find('button').prop('disabled', false); 
       return false; 
      } 
     }); 

Answer 1

사실 data.files에서 하나 개의 파일을 제거 할 수 있습니다. ... 내가 KnockoutJs에게 나는 "업로드 개체"의 인스턴스를 저장하고있어하는 웹 구성 요소를 사용하고 있는데 내가 파일 목록에 대한 관찰 배열을

내 구성은 다음과 같습니다

.fileupload({ 
      url: DataServiceBaseUrl + '/api/Ruleset/BatchImport', 
      dataType: 'json', 
      singleFileUploads: false, 
      replaceFileInput: false, 
      add: function (e, data) { 
... 

내가 무슨 짓을했는지 이다

this.RemoveFile = function(index){ 
    this.UploadInstance.files.splice(index,1); 
    this.UploadFiles.splice(index,1); 
} 

및 템플릿을했다 :

<!-- ko foreach: UploadFiles --> 
    <div><span data-bind="text: name"></span><button data-bind="click: function() { $component.RemoveFile($index()); }">delete</button></div> 
<!-- /ko -->