Jak usunąć jeden określony wybrany plik z kontrolki pliku wejściowego

Jak wskazywali inni, FileList jest tylko do odczytu. Możesz to obejść, przesuwając te pliki do osobnego Array. Następnie możesz zrobić, co chcesz, z tą wyselekcjonowaną listą plików. Jeśli przesłanie ich na serwer jest celem, możesz użyć FileReader API.

Poniżej znajduje się okrągły sposób na całkowite uniknięcie konieczności modyfikowania FileList. Kroki:

1. Dodaj zwykły detektor zdarzeń zmiany wejścia pliku
2. Pętla przez każdy plik z Zmień Zdarzenie, filtr dla żądanej walidacji
3. wypychanie poprawnych plików do osobnej tablicy
4. Użyj FileReader API do odczytu plików lokalnie
5. Prześlij poprawne, przetworzone pliki na Serwer

Obsługa zdarzenia i podstawowy kod pętli pliku:

var validatedFiles = [];
$("#fileToUpload").on("change", function (event) {
  var files = event.originalEvent.target.files;
  files.forEach(function (file) {
    if (file.name.matches(/something.txt/)) {
      validatedFiles.push(file); // Simplest case
    } else { 
      /* do something else */
    }
  });
});

Poniżej znajduje się bardziej skomplikowana wersja pętli plików, która pokazuje, w jaki sposób można użyć API FileReader, aby załadować plik do przeglądarki i opcjonalnie przesłać go na serwer jako zakodowany obiekt blob Base64.

  files.forEach(function (file) {
    if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side
      var reader = new FileReader();
      // Setup listener
      reader.onload = (function (processedFile) {
        return function (e) {
          var fileData = { name : processedFile.name, fileData : e.target.result };

          // Submit individual file to server
          $.post("/your/url/here", fileData);

          // or add to list to submit as group later
          validatedFiles.push(fileData);
        };
      })(file);

      // Process file
      reader.readAsDataURL(file);
    } else { 
      /* still do something else */
    }
  });

Uwaga o używaniu API {[4] }. Base64 kodowanie pliku zwiększy jego rozmiar o około 30%. Jeśli to nie jest do przyjęcia, musisz spróbować czegoś innego.