Javascript удалить файл из списка файлов для загрузки
Это первый файл по 0-му индексу. Свойства файла перечислены и все работает, но .
Как мы можем удалить элементы из DOM [object FileList] с помощью JavaScript?
Я нашел очень быстрый и короткий обходной путь для этого. Проверено во многих популярных браузерах (Chrome, Firefox, Safari);
Во-первых, вы должны преобразовать FileList в массив
Чтобы удалить конкретный элемент, используйте этот
Нет, мы можем сделать его съемным. Я реализовал это, и это работает определенно.
Сначала вам нужно инициализировать эти переменные
Затем напишите этот код при изменении ввода файла
Тогда наконец эти 2 функции помогут сделать все остальное
Наконец, когда вы отправляете свою форму, чем брать файлы из массива
Наконец-то нашел способ! До этого я знал, что input.files примет FileList, но единственный способ получить его - это событие перетаскивания.
Но теперь я знаю, как создать собственный список файлов!
Это работает в Chrome (и, возможно, некоторые другие)
Это работает в Firefox
Дело в том, что вам нужно перебрать каждый файл на входе, добавить те, которые вы все еще хотите сохранить, и назначить file.files с новым списком файлов.
Наиболее практичный способ удалить FileList object - просто удалить сам ввод файла из DOM и снова добавить его. Это удалит все элементы из списка файлов.
Я знаю, что многие люди скажут, что это не элегантное решение, но его очень легко реализовать, лучший подход для большинства случаев, и вы можете сделать то, что важно, с помощью входного файла, проверки!
Напоминаем, что входной файл имеет недостатки безопасности (Уязвимость: загрузка файлов без ограничений ) .
Поскольку этот пост на самом деле не ответил на вопрос, я знаю, что он не получит никаких баллов, но действительно рассмотрим альтернативы. Для моего случая, когда я реализовывал удаление элемента объекта файла, не имело смысла продолжать загрузку после того, как какой-то файл не прошел проверку, даже если некоторые файлы были в порядке. В конце концов, пользователю все равно придется открыть входной файл и повторить процесс. Таким образом, для моего случая эта функция только добавила сложности, и в спецификации не было такого большого контроля для входного файла.
Ниже приведен пример с проверкой, которая удаляет все FileList object при сбое:
I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList.
Now I want to remove some of the files, but I don't know how, or if it's even possible.
Preferably I'd like to just delete them from the FileList; I've got no use for them. But if that's not possible, should I instead write in checks in code that interacts with the FileList? That seems cumbersome.
Just curious: why do you want to do this? Why do you say “I've got no use for them” about (some) files the user selected?
It's probably more so that the user can remove files prior to upload. If you had originally selected 20 and then you decide you actually don't want to upload the 14th, then you can't just remove that one, you have to start all over again (which is a bit of a pain). I think making FileList readonly is a bad oversight, unless there's some security implication I'm not seeing.
It's security troubles with deleting files from input's FileList directly but you can clone that FileList immediately after closing file upload dialog and then modify this clone & use it when posting via ajax
17 Answers 17
If you want to delete only several of the selected files: you can't. The File API Working Draft you linked to contains a note:
The HTMLInputElement interface [HTML5] has a readonly FileList attribute, […]
[emphasis mine]
Reading a bit of the HTML 5 Working Draft, I came across the Common input element APIs. It appears you can delete the entire file list by setting the value property of the input object to an empty string, like:
BTW, the article Using files from web applications might also be of interest.
Note that an attribute being readonly does not mean that you can't change the object that it points to. You could manipulate FileList (if that were possible), it just means you can't assign a new FileList to it.
@RobinBerjon Chrome seems to ignore the ´readonly´ attribute while FireFox does not allow write operations. Unfortunately your suggestion to just manipulate the FileList does not work in FireFox either.
@streetlight That would be a huge security vulnerability, if the site owner can determine which files to upload from a user's machine.
This question has already been marked answered, but I'd like to share some information that might help others with using FileList.
It would be convenient to treat a FileList as an array, but methods like sort, shift, pop, and slice don't work. As others have suggested, you can copy the FileList to an array. However, rather than using a loop, there's a simple one line solution to handle this conversion.
Tested OK in FF, Chrome, and IE10+
How do you actually modify the FileList? Assign this new array to the input fileDialog.files = fileBuffer ?
Since JavaScript FileList is readonly and cannot be manipulated directly,
BEST METHOD
You will have to loop through the input.files while comparing it with the index of the file you want to remove. At the same time, you will use new DataTransfer() to set a new list of files excluding the file you want to remove from the file list.
With this approach, the value of the input.files itself is changed.
ALTERNATIVE METHOD
Another simple method is to convert the FileList into an array and then splice it.
But this approach will not change the input.files
@ct0 thats why you should loop in reverse. From back to start of array. So you never mess up indices.
If you are targeting evergreen browsers (Chrome, Firefox, Edge, but also works in Safari 9+) or you can afford a polyfill, you can turn the FileList into an array by using Array.from() like this:
Then it's easy to handle the array of File s like any other array.
Since we are in the HTML5 realm, this is my solution. The gist is that you push the files to an Array instead of leaving them in a FileList, then using XHR2, you push the files to a FormData object. Example below.
First, you have to convert FileList to an Array
to delete the particular element use this
You created new variable from event.target.files which is not linked to input so it can't change anything except your local variable..
I know this is an old question but it's ranking high on search engines in regards to this issue.
properties in the FileList object cannot be deleted but at least on Firefox they can be changed. My workaround this issue was to add a property IsValid=true to those files that passed check and IsValid=false to those that didn't.
then I just loop through the list to make sure that only the properties with IsValid=true are added to FormData.
Now the html and styles for this. I'm quite a newbie but all this actually worked for me and took me a while to figure it out.
The styles for that. I had to mark some of them !important to override Joomla behavior.
I hope this helps.
Thanks @Nicholas Anderson simple and straight , here is your code applied and working at my code using jquery.
There might be a more elegant way to do this but here is my solution. With Jquery
Basically you cleat the value of the input. Clone it and put the clone in place of the old one.
Я создаю веб-приложение с возможностью перетаскивания для загрузки, используя HTML5, и помещаю файлы в div и, конечно же, извлекаю объект dataTransfer, который дает мне FileList.
Теперь я хочу удалить некоторые файлы, но я не знаю, как, или, если это вообще возможно.
Желательно, чтобы я просто удалил их из FileList; Мне они бесполезны. Но если это невозможно, я должен вместо этого писать в проверках в коде, который взаимодействует с FileList? Это кажется громоздким.
Если вы хотите удалить только несколько из выбранных файлов: вы не можете. Рабочий черт API файла, на который вы ссылаетесь, содержит примечание:
HTMLInputElement интерфейс [HTML5] имеет только для чтения FileList атрибут, […]
[Акцент мой]
Прочитав немного HTML 5 Working Draft, я наткнулся на Общие API input элементов. Похоже, что вы можете удалить весь список файлов, задав для свойства value объекта input пустую строку, например:
Кстати, статья Использование файлов из веб-приложений также может представлять интерес.
Я просто изменяю тип ввода текста и обратно в файл: D
Вы можете создать массив и использовать его вместо списка файлов только для чтения.
После этого сделайте загрузку по вашему списку вместо встроенного списка. Я не уверен в контексте, в котором вы работаете, но я работаю с плагином jquery, который нашел, и мне нужно было взять исходный код плагина и поместить его на страницу с помощью тегов . Затем над источником я добавил свой массив, чтобы он мог действовать как глобальная переменная, а плагин мог ссылаться на него.
Тогда это было просто вопросом обмена ссылками.
Я думаю, что это позволило бы вам также добавить перетаскивание еще раз, если встроенный список доступен только для чтения, то как еще вы можете добавить пропущенные файлы в список?
Вы можете просто проверить, присутствует ли файл в списке файлов в вашей DOM, и, конечно, если это не так, вы просто не отправляете этот элемент в de DB.
Спасибо @Nicholas Anderson, просто и прямо, вот ваш код, применяемый и работающий над моим кодом с использованием jquery.
Теперь HTML и стили для этого. Я довольно новичок, но все это действительно сработало для меня и заняло у меня некоторое время, чтобы понять это.
Стили для этого. Я должен был отметить некоторые из них, важные, чтобы отвергнуть поведение Joomla.
Надеюсь, это поможет.
Там может быть более элегантный способ сделать это, но вот мое решение. С Jquery
В основном вы очищаете значение ввода. Клонируйте его и поместите клон на место старого.
Я знаю, что это старый вопрос, но он занимает высокое место в поисковых системах по этому вопросу.
Свойства в объекте FileList нельзя удалить, но по крайней мере в Firefox их можно изменить . Моим решением этой проблемы было добавление свойства IsValid=true к тем файлам, которые прошли проверку, и IsValid=false к тем, которые не прошли проверку.
Затем я просто перебираю список, чтобы убедиться, что только свойства с IsValid=true добавлены в FormData .
Я нашел очень быстрый и короткий обходной путь для этого. Проверено во многих популярных браузерах (Chrome, Firefox, Safari);
Во-первых, вы должны преобразовать FileList в массив
Чтобы удалить конкретный элемент, используйте этот
Поскольку мы находимся в сфере HTML5, это мое решение. Суть в том, что вы помещаете файлы в массив вместо того, чтобы оставлять их в FileList, а затем, используя XHR2, вы помещаете файлы в объект FormData. Пример ниже.
Если вы нацелены на вечнозеленые браузеры (Chrome, Firefox, Edge, но также работают в Safari 9+) или можете позволить себе полифилл, вы можете превратить FileList в массив, используя Array.from() , например так:
Тогда легко обрабатывать массив File как любой другой массив.
Этот вопрос уже помечен как отвеченный, но я хотел бы поделиться информацией, которая может помочь другим с использованием FileList.
Было бы удобно рассматривать FileList как массив, но такие методы, как sort, shift, pop и slice не работают. Как предлагали другие, вы можете скопировать FileList в массив. Однако вместо того, чтобы использовать цикл, есть простое однострочное решение для обработки этого преобразования.
Здравствуйте. Если около каждого файла,миниатюра которого отображается на сайте, была бы кнопка "Удалить", то можно ли действительно удалить данный файл?Я имею в виду так,чтобы он не отправлялся на сервер. Прямого решения этого задания нет,но мб есть какие-то альтернативные решения? Может как-то заменить один инпут на другой? Какие есть варианты?
Удаление поля input type="file" с заданным именем файла
Если у меня есть несколько полей для прикрепления файлов input type="file", как можно удалить.
Ошибка "LNK1169: one or more multiply defined symbols found" при добавлении файла в проект
Здравствуйте, у меня такая проблема в Microsoft Visual Studio 2013/2012: создаю проект, создаю C++.
Удаление символов из input
Запрограммировать поле ввода input чтобы при выводе с клавиатуры кнопок Q, W, X, было невозможно
Непонятно, что за файлы. Если имеется ввиду массив элементов , то их можно очистить программно, если вы об этом.
Непонятно, что за файлы. Если имеется ввиду массив элементов , то их можно очистить программно, если вы об этом.
Menshakovich, если input всего один, то тут сложнее, его свойство files невозможно отредактировать в js, насколько мне известно, объект FileList readonly. Но можно пойти другим путем: спрятать input, оставить кнопку с аналогичной надписью, при клике на кнопке вызвать клик на input'е, потом читать его файлы, записывать куда-нибудь, затем выводить список отдельно в dom, при клике на списке убирать 1 файл из массива, пример: jsfiddle, после выбора файлов появится список, при клике на элемент - элемент удалится вместе с файлом, ему соответствующим.
cmath, спасибо, как раз то, что искал!
Попробовал добавить к своей форме - перестали прикрепляться файлы. Ваш код только для примера, или ошибка с моей стороны?
Да, это только для примера, чтобы показать какой может быть workaround. Чтобы понять, почему у вас перестали прикрепляться файлы, нужно больше данных. Создайте новую тему в этом разделе и опишите детально вашу ситуацию.
Удаление строки из файла\либо удаление самого файла.
День добрый, вот функция(используемые переменные объявленны ранее): void delete_cruise() < FILE.
Удаление значений из input, по клику
Кликая по ссылкам, вывожу в input а также в DIV "Вывод №2" их значения через запятую, с помощью JS.
Удаление input по его class и value
Есть две функции. Первая при определенном событии создает элемент input с заданными атрибутами, а.
Как удалить один конкретный выбранный файл из входного контроля файл?
У меня есть входной файл управления с возможностью выбора нескольких файлов; однако, я хочу проверить файл, и если он имеет неправильное расширение, то я должен удалить этот файл из самого файла, возможно ли это?
Я попытался, как показано ниже
Ниже приведен скриншот объекта, но я не могу его изменить
как указывали другие люди, FileList доступно только для чтения. Вы можете обойти это, нажав эти файлы в отдельный Array хотя. Затем вы можете делать все, что хотите, с этим кураторским списком файлов. Если загружать их на сервер, является целью, вы можете использовать FileReader API-интерфейс.
Ниже приведен раунд о способе полностью избежать необходимости изменять FileList . Шаги:
обработчик событий и основной код цикла файла:
Ниже приведена более сложная версия цикла файлов, которая показывает, как вы можете использовать FileReader API для загрузки файла в браузер и при необходимости отправьте его на сервер в виде blob-кода Base64.
предупреждение об использовании FileReader API-интерфейс. Кодировка Base64 файла увеличит его размер примерно на 30%. Если это неприемлемо, вам нужно будет попробовать что-то еще.
Я думал, что я должен добавить свой комментарий здесь, а здесь (я ответил Здесь:JavaScript удалить файл из списка файлов для загрузки)
я нашел обходной путь. Это не потребует AJAX для запроса вообще, и форма может быть отправлена на сервер. В основном вы можете создать hidden или text введите и установите его value атрибут строки base64, созданной после обработки выбранного файла.
вы, вероятно, рассмотрите идея создать несколько входных файлов вместо input text или hidden . Это не сработает, поскольку мы не можем присвоить ему значение.
этот метод будет включать входной файл в данные, отправленные в базу данных, и игнорировать входной файл, который вы могли бы:
- в задней части не учитывайте поле;
- вы можете установить disabled атрибут входного файла перед сериализацией формы;
- удалите элемент DOM перед отправкой данные.
когда вы хотите удалить файл, просто получите индекс элемента и удалите входной элемент (текстовый или скрытый) из DOM.
Читайте также: