Удалить элемент FileList из нескольких «input: file»

У меня есть этот DOM:

var id = 0;

$('input:file#upload')[0].files[ id ]

Что получитьs первый файл по 0-му индексу. Свойства файла перечислены и все работает, но ...

Как мы удаляем элементы из DOM[object FileList] с JavaScript?

 Endless09 дек. 2017 г., 13:40

Ответы на вопрос(5)

Самый практичный способ удалитьFileList object это просто удалить сам файл ввода из DOM и снова добавить его. Это удалит все элементы из списка файлов.

Я знаю, что многие люди скажут, что это не элегантное решение, но его очень легко реализовать, лучший подход для большинства случаев, и вы можете сделать то, что важно, с помощью входного файла, проверки!

Теперь вы видите, что контролироватьFileList object трудно. Если вам действительно нужно манипулировать отдельным элементом файла, прочитайтеЗагрузка нескольких файлов и множественный выбор (часть 2), RAYMOND CAMDEN, Я предпочитаю просто заставить пользователя снова выбрать файлы (если он сделал глупость) и дать ему сообщение об ошибке, что пошло не так. Это не сделает пользовательский опыт плохим.

Напоминаем, что входной файл приносит слабые места в безопасности (Уязвимость: неограниченная загрузка файлов).

Так как этот пост не сделална самом деле не отвечаю на вопрос, я знаю, это победитНе получайте никаких баллов, но действительно рассматривайте альтернативы. Для моего случая, когда я реализовывал удаление элемента объекта файла, это нене имеет смысла продолжать загрузку после того, как какой-то файл не сделалпройти проверку, даже если некоторые файлы были в порядке. В конце концов, пользователю все равно придется открыть входной файл и повторить процесс. Таким образом, для моего случая эта функция только добавляет сложности, и в спецификации не было такого большого контроля для входного файла.

Ниже приведен пример с проверкой, который удаляет всеFileList object когда не удается:

function validateFormfile(inputTypeFile_id) {
  $(inputTypeFile_id).change((event) => {
    //check if files were select, if not, nothing is done
    if (event.target.files.length > 0) {
      let fileName;
      let totalsize = 0;
      let notvalidate = false;
      for (let i = 0; i < event.target.files.length; i++) {

        fileName = event.target.files[i].name;
        fileSize = event.target.files[i].size;
        if (fileName != undefined || fileName != "") {

          if (validate_fileExtension(fileName) === false) {
            notvalidate = true;
            let errorMessage = "File upload must be of 'audio', 'image', 'video', 'text', or 'pdf' format!";
            //write you error function to show error to user
            //alertpanel(errorMessage);
            console.log(errorMessage);
            break;
          }
          totalsize += Number(event.target.files[i].size);
          console.log(fileName, fileSize, "bytes");
        }
      }

      //check if file size is bigger than maxsize
      let maxsize = 10 * 1024 * 1024; //10Mb
      if (totalsize > maxsize && notvalidate === false) {
        notvalidate = true;
        let errorMessage = `Upload files cannot exceed the maximum of ${maxsize} bytes.`;
        //write you error function to show error to user
        //alertpanel(errorMessage);
        console.log(errorMessage);
      }

      if (notvalidate) {
        //select the node where to append the input file
        let inputlabel = $(inputTypeFile_id).siblings().first();
      
        //we delete the input file element to delete its FileList object content and re-append to the DOM
        $(inputTypeFile_id).remove();
        let input_file = $('');

        //append the input file after the selected inputlabel node 
        inputlabel.after(input_file);

        //re init any event listener for the re-appended element
        validateFormfile(inputTypeFile_id);
      }
    }
  });
}

function validate_fileExtension(fileName) {
  let image_extensions = new Array("bmp", "jpg", "jpeg", "jpe", "jfif", "png", "gif");
  let text_extensions = new Array("txt", "pdf");
  let video_extensions = new Array("avi", "mpeg", "mpg", "mp4", "mkv");
  let audio_extensions = new Array("mp3", "acc", "wav", "ogg");
  let allowed_extensions = image_extensions.concat(text_extensions, video_extensions, audio_extensions);
  // split function will split the fileName by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the fileName.
  let file_extension = fileName.split('.').pop().toLowerCase();

  for (let i = 0; i 

Я нашел очень быстро и короткий обходной путь для этого. Проверено во многих популярных браузерах (Chrome, Firefox, Safari);

Во-первых, вы должны преобразовать FileList в массив

var newFileList = Array.from(event.target.files);

чтобы удалить конкретный элемент, используйте этот

newFileList.splice(index,1);
 Vicky04 дек. 2017 г., 10:38
индекс файла, который вы хотите удалить из этого массива
 Bernoulli IT30 нояб. 2017 г., 12:43
Откуда берется индекс?
Решение Вопроса

 боюсь, что вы не можете удалить объекты изFileList object непосредственно. Просто назначьте$('input:file#upload')[0].files дляArray а затем удалить элементы из этого массива, используяsplice или метод по вашему выбору, а затем использовать его.Array

 user138632005 июн. 2013 г., 18:23
ну, мне нужно удалить их из очереди загрузки, а не из копии этого списка ... это возможно?
 Imran Latif05 июн. 2013 г., 19:53
@ZlatanO. С удовольствием :-). Так что кажется, что ты неНа самом деле я не хочу загружать файлы, но заинтересован в том, чтобы делать некоторые полезные вещи на стороне клиента, читая их содержимое :-).
 user138632006 июн. 2013 г., 08:46
Нет нет! Я хочу загрузить файлы. Я использовал этот учебник:net.tutsplus.com/tutorials/javascript-ajax/... - И это моя первая встреча, когда я имею дело сinput:file element и используяFileReader учебный класс. Спасибо, тем не менее! :) Ура! Я '
 Imran Latif31 авг. 2015 г., 21:07
@Spooky: Спасибо за комментарий, да, конечно, я попробовал свое решение. Я думаю, что ты невнимательно прочитайте вопрос и формулировку проблемы. Вы не можете удалить файлы изfiles массив, связанный с управлением файлами, но вы можете назначить этот массив стандартному массиву в JavaScript, а затем удалить из этого стандартного массива файлы, которые вне курса не влияют наfiles массив управления файлами, но вы можете использовать этот стандартный массив для загрузки оставшихся файлов на сервер.
 Imran Latif05 июн. 2013 г., 19:29
Вы не можете удалить файлы изFileList но, как я уже сказал, все, что вы хотите, это назначить тех,file objects отFileList вarray и тогда вы можете делать с ними что угодно. Теперь это решение зависит от того, хотите ли вы загружать файлы черезAjax or via Форма отправки. If you suppose to upload files via Аякс тогдаArray Решение будет работать отлично, как у вас жеfile objects с точно такими же свойствами.
 Spooky31 авг. 2015 г., 16:50
Ваше предложение "просто назначьте$('input:file#upload')[0].files для "Array не работает, так кактолько для чтения. Вы даже пробовали это?
 user138632005 июн. 2013 г., 19:50
Хм ... да, вы правы ... Я мог бы просто прочитать файлы сFileReader :) спасибо на эти советы, приятель!
 Imran Latif06 июн. 2013 г., 08:58
 Я очень рад, что мой ответ поможет вам :-). Благодарю.

Нет, мы можем сделать его съемным. Я реализовал это, и это работает определенно.

Сначала вам нужно инициализировать эти переменные

var newImageObj = [];
var ImageNo = 0;

Затем напишите этот код на вход файласмена

$("#exampleInputFileProduct").change(function () {

            var fileUpload = document.getElementById("exampleInputFileProduct");

            //$("#mainImages").html('');
            //$("#subImages").html('');

            if (typeof (FileReader) != "undefined") {

                //Here Check File Extension
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;


                for (var i = 0; i < fileUpload.files.length; i++) {
                    var j = 0;
                    var file = fileUpload.files[i];
                    var NewFile = fileUpload.files[i];
                    //Here Check File Size 1MB = 1000000 Bytes
                    if (file.size < 2048000) {
                        if (regex.test(file.name.toLowerCase())) {
                            var reader = new FileReader();
                            reader.onload = function (e) {

                                if ($("#mainImages").find(".item").attr("id") == "FirstSlider") {
                                    $("#mainImages").html('');
                                    $("#subImages").html('');
                                    $("#subImages").append("");
                                }

                                if ($("#mainImages").find(".item").hasClass("active")) {
                                    $("#mainImages").append("<img class="CImage" src="" + e.target.result + "" alt="">");
                                } else {
                                    $("#mainImages").append("<img class="CImage" src="" + e.target.result + "" alt="">");
                                }

                                //if ($("#subImages").find(".item").length == 0) {
                                //    $("#subImages").append("");
                                //} else {
                                if (($("#subImages").find(".item").find("div").length / 5) >= $("#subImages").find(".item").length) {
                                    $("#subImages").append("");
                                }
                                //}

                                var append = 0;

                                $.each($("#subImages").find(".item"), function (p, pelement) {
                                    if (append == 0) {
                                        if ($(pelement).find("div").length != 5) {
                                            var newID = $(pelement).find("div").length;
                                            newID = newID;
                                            $(pelement).append(" <img src="" + e.target.result + "" alt="">");
                                            append = append + 1;
                                        }
                                    }
                                })

                                j = j + 1;

                                ImageNo = ImageNo + 1;
                            }

                            newImageObj.push(file);

                            reader.readAsDataURL(file);
                        }
                    }
                }
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });

Тогда наконец эти 2 функции помогут сделать все остальное

function LoadImage(objclass) {
            $("#mainImages").find(".item").removeClass("active");
            $("#mainImages").find("." + objclass + "").addClass("active");
        }

        function RemoveImage(objclass, ImageName) {

            $.each(newImageObj, function (e, element) {
                if ($(this)[0].name.toLowerCase().trim() == ImageName.trim()) {
                    newImageObj.pop(this);
                }
            });

            $("#mainImages").find("." + objclass + "").remove();
            $("#subImages").find(".item").find("." + objclass + "").remove();

            if ($("#mainImages").find(".item").length == 0) {
                $("#mainImages").append("<img class="CImage" src="/C,ontent/img/DefaultProduct.gif" alt="">");
                $("#subImages").append(" <img src="/Content/img/DefaultProduct.gif" alt="">");
            } else {
                $("#mainImages").find(".item").removeClass("active");
                $("#mainImages").find(".item:first-child").addClass("active");
                $("#subImages").find(".item").removeClass("active");
                $("#subImages").find(".item:first-child").addClass("active");
            }
        }

Наконец, когда вы отправляете свою форму, чем брать файлы из массива

Наконец-то нашел способ! Я знал до этогоinput.files примет FileList, но единственный способ получить его - это событие перетаскивания.

Но теперь я знаю, как создать собственный список файлов!

Это работает в Chrome (и, возможно, некоторые другие)

const dt = new DataTransfer()
dt.items.add(new File([], 'a.txt'))
input.files = dt.files

// This will remove the fist item when selecting many files
input.onchange = () => {
  const dt = new DataTransfer()

  for (let file of input.files)
    if (file !== input.files[0]) 
      dt.items.add(file)

  input.onchange = null // remove event listener
  input.files = dt.files // this will trigger a change event
}

Это работает в Firefox

const cd = new ClipboardEvent("").clipboardData
cd.items.add(new File(['a'], 'a.txt'))
input.files = cd.files

// This will remove the fist item when selecting many files
input.onchange = () => {
  const dt = new DataTransfer()

  for (let file of input.files)
    if (file !== input.files[0]) 
      dt.items.add(file)

  input.onchange = null // remove event listener
  input.files = dt.files // this will trigger a change event
}

Дело в том, что вам нужно перебрать каждый файл на входе, добавить те, которые вы все еще хотите сохранить, и назначить file.files с новым списком файлов.

 Ricardo Green16 янв. 2019 г., 10:52
Это очень полезно. Обыскивал ТАК около 5 часов. Уф! Там много вопросов, ищущих это. Надеюсь, у меня есть время, чтобы отослать этот ответ. Большое спасибо @Endless.

Ваш ответ на вопрос