Skasuj pliki programowo za pomocą jquery fileupload basic

Question

Używam wtyczki do wysyłania plików blueimp (wersja podstawowa) do implementacji przesyłania plików w wielu plikach. Próbuję wdrożyć funkcjonalność, aby umożliwić użytkownikowi usuwanie oczekujących plików do przesłania. Nie mogę się dowiedzieć, jak poprawnie uzyskać dostęp do tablicy plików. Za każdym razem w wywołaniu zwrotnym indeks wynosi 0, a długość tablicy plików wynosi 1 (zawiera tylko plik, który użytkownik kliknął, aby usunąć). Dodaję łącze dla każdego pliku w kolejce do elementu div, który można kliknąć i powinien usunąć plik po kliknięciu.

Moja myśl polegała na utworzeniu linku do usunięcia z indeksem pliku i usunięciu go z tablicy, ale z powodu opisanego powyżej problemu indeks nigdy nie jest poprawny. Próbowałem również przez nazwę pliku, ale nazwa pliku w wywołaniu zwrotnym "on" jest zawsze pierwszym plikiem, który został wybrany do przesłania - niektóre zakresy muszą być zrozumiałe.

Jak programowo usunąć pliki z kolejki wysyłania?

HTML:

<div id="fileBrowserWrapper"> 
    <form id="myForm" action="#" method="post" enctype="multipart/form-data"> 
     <input id="uploadDocBrowse" type="file" name="files[]" multiple/>              
    </form> 
</div> 
<div id="inputFilesBox"></div> 
<div id="uploadFilesBox"></div> 

a plik przesłać JavaScript:

$('#myForm').fileupload({ 
    url: "/SomeHandler", 
    dataType: 'html', 
    autoUpload: false, 
    singleFileUploads: false, 
    replaceFileInput: false, 
    add: function (e, data) { 
     console.log("Number of files: " + data.files.length); 

     $.each(data.files, function (index, file) {          
      $('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>") 
      .on('click', { filename: file.name, files: data.files }, function(event) {        
       var uploadFilesBox = $("#uploadFilesBox"); 
       var remDiv = $("#fileDiv_" + event.data.filename); 
       remDiv.remove(); 
       event.data.files.splice(0, 1);        
      } 
     }); 
    }); 

    data.context = $('#myButton') 
    .click(function() { 
     data.submit(); 
    });    
}); 

Answer 1

I rozwiązać ten. Oto rozwiązanie z opisem:

Znalazłem moje rozwiązanie po majstrowaniu przy tym trochę więcej. Kluczem było pamiętać, że oddzwoniłem. Tak więc w procedurze obsługi zdarzeń dla funkcji usuwania, wyzerowałem po prostu tablicę data.files, aw przypadku przesłania dla tego handler'a, wysyłam tylko jeśli tablica plików ma długość większą niż 0. Oczyściłem funkcję obsługi zdarzeń tak, aby to jest łatwiejsze dla oczu. HTML jest niezmieniony.

Nowy kod JavaScript przenoszenia:

$('#myForm').fileupload({ 
      url: "/SomeUrl", 
      dataType: 'html',    
      add: function (e, data) { 
       $.each(data.files, function (index, file) { 
        var newFileDiv = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>"); 
        $('#uploadFilesBox').append(newFileDiv); 

        newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, function (event) {       
         event.preventDefault(); 
         var uploadFilesBox = $("#uploadFilesBox"); 
         var remDiv = $(document.getElementById("fileDiv_" + event.data.filename)); 
         remDiv.remove();       
         data.files.length = 0; //zero out the files array          
        }); 

        data.context = newFileDiv; 
       }); 

       $('#myButton') 
        .click(function() { 
         if (data.files.length > 0) {  //only submit if we have something to upload 
          data.submit(); 
         }              
        }); 
      } 
}); 

Answer 2

pracuje dla mnie do wielu plików - sprawdza wszystkie pliki i nie łamie, gdy plik z błędem jest w środku wszystkich plików (jak .splice() lub .lenght=0 do). Idea jest: zrobić walidacji -> jeśli błąd: indeksu znak pliku z błędem -> po wszystkie pliki/Zanim Dodano: usunąć/usunąć błędne indeksy/plików przez $.grep()-> przesłać dobre pliki razem singleFileUploads: false.

$(this).fileupload({ 
     // ... 
     singleFileUploads: false, // << send all together, not single 
     // ... 
     add: function (e, data) { 

      // array with all indexes of files with errors 
      var error_uploads_indexes = []; 

      // when add file - each file 
      $.each(data.files, function(index, file) { 

       // array for all errors - in example is only one: size 
       var uploadErrors = []; 

       // ... validation 

         // check size 
         if(data.files[index]['size'] > 1048576) { 
          uploadErrors.push('Filesize is too big'); 
         }; 
       // ... 

       // when errors 
       if(uploadErrors.length > 0) { 

        // mark index of error file 
        error_uploads_indexes.push(index); 
        // alert error 
        alert(uploadErrors.join("\n")); 

       }; 

      }); // << each 


      // remove indexes (files) with error 
      data.files = $.grep(data.files, function(n, i) { 
       return $.inArray(i, error_uploads_indexes) ==-1; 
      }); 


      // if are files to upload 
      if(data.files.length){ 
       // upload by ajax 
       var jqXHR = data.submit().done(function (result, textStatus, jqXHR) { 
         //... 
        alert('done!') ; 
         // ... 
       }); 
      } // 

     }, 
     // ... 
    }); // << file_upload 

Answer 3

Dzięki za to @Furynacja.

To, co zrobiłem, było podobne do twojego podejścia. Dla każdego pliku, który wybiorę, dodaję wiersz do tabeli (przesłanie przed przesłaniem). Ten wiersz przypisz do data.context, aby użyć go do późniejszego użycia.

Patrz: https://github.com/blueimp/jQuery-File-Upload/issues/3083

Moja fragment kodu jest w module obsługi add zwrotnego:

$("#upload").click(function() { 
       if (data.files.length > 0) { 
        data.submit(); 
       } 
      }); 
      data.context.find('a').on('click',function (event) { 
       event.preventDefault(); 
       data.context.remove(); 
       data.files.length = 0; 
      }); 

Usuwa wiersz tabeli i resetuje tablicę.

Jeśli istnieje bardziej przejrzysty sposób, proszę dać mi znać.