Как удалить один конкретный выбранный файл из управления входным файлом

Ответ 1

Как отмечали другие люди, FileList читается только. Вы можете обойти это, нажав эти файлы в отдельный Array. Затем вы можете делать все, что захотите, с этим кураторским списком файлов. Если вы загружаете их на сервер, вы можете использовать API FileReader.

Ниже приведен пример полного отказа от необходимости изменять FileList. Шаги:

• Добавить обычный прослушиватель событий изменения входного файла
• Прокрутка каждого файла из события изменения, фильтрация для желаемой проверки
• Вставьте действительные файлы в отдельный массив
• Использовать API FileReader для локального чтения файлов.
• Ввести действительные обработанные файлы на сервер

Обработчик событий и основной код цикла файлов:

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 */
    }
  });
});

Ниже приведена более сложная версия цикла файлов, в которой показано, как вы можете использовать API FileReader для загрузки файла в браузер и, возможно, отправить его на сервер в виде закодированного блоком 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 */
    }
  });

Обратите внимание на использование API FileReader. Base64, кодирующий файл, увеличит его размер примерно на 30%. Если это неприемлемо, вам нужно попробовать что-то еще.

Ответ 2

Я подумал, что здесь также должен добавить свой комментарий здесь (я ответил здесь: JavaScript удалить файл из FileList для загрузки)

Я нашел обходное решение. Это не потребует AJAX для запроса вообще, и форма может быть отправлена ​​на сервер. В принципе, вы можете создать вход hidden или text и установить его атрибут value в строку base64, созданную после обработки выбранного файла.

<input type=hidden value=${base64string} />

Вероятно, вы рассмотрите идею создания нескольких входных файлов вместо ввода text или hidden. Это не сработает, поскольку мы не можем присвоить ему значение.

Этот метод будет включать входной файл в данные, отправленные в базу данных, и игнорировать входной файл, который вы могли бы:

• в back-end не учитывается поле;
• вы можете установить атрибут disabled во входной файл перед сериализацией формы;
• удалите элемент DOM перед отправкой данных.

Если вы хотите удалить файл, просто получите индекс элемента и удалите элемент ввода (текст или скрытый) из DOM.

Требования:

• Вам нужно написать логику для преобразования файлов в base64 и хранить все файлы внутри массива всякий раз, когда входной файл запускает событие change.

Плюсы:

• Это в основном даст вам много управления, и вы можете фильтровать, сравнивать файлы, проверять размер файлов, тип MIME и т.д.

Ответ 3

HTML

<input id="fileInput" name="fileInput" type="file" />
<input onclick="clearFileInput()" type="button" value="Clear" />

Javascript

    function clearFileInput(){
        var oldInput = document.getElementById("fileInput");

        var newInput = document.createElement("input");

        newInput.type = "file";
        newInput.id = oldInput.id;
        newInput.name = oldInput.name;
        newInput.className = oldInput.className;
        newInput.style.cssText = oldInput.style.cssText;
        // copy any other relevant attributes

        oldInput.parentNode.replaceChild(newInput, oldInput);
    }