Очистка <input type = 'file' /> с помощью jQuery
Можно ли очистить контрольное значение <input type=’file’ /> с помощью jQuery? Я пробовал следующее:
Но он не работает.
26 ответов
Легко: вы обертываете <form> вокруг элемента, вызываете reset в форме, а затем удаляете форму с помощью функции deploy(). В отличие от решений clone(), в противном случае в этом потоке вы заканчиваете тем же самым элементом в конце (включая настраиваемые свойства, которые были установлены на нем).
Протестировано и работает в Opera, Firefox, Safari, Chrome и IE6+. Также работает над другими типами элементов формы, за исключением type=»hidden» .
Как отмечает Тимо, ниже, если у вас есть кнопки для запуска reset поля внутри <form> , вы должны вызвать preventDefault для события, чтобы предотвратить <button> от запуска отправки.
Изменить
Не работает в IE 11 из-за нефиксированной ошибки. Текст (имя файла) очищается на входе, но его список File остается заполненным.
Быстрый ответ: замените его.
В приведенном ниже коде я использую метод replaceWith jQuery, чтобы заменить элемент управления самим клоном. Если у вас есть обработчики, связанные с событиями на этом элементе управления, мы также захотим их сохранить. Для этого мы передаем true в качестве первого параметра метода clone .
Если клонирование при сохранении обработчиков событий представляет собой любые проблемы, которые вы могли бы рассмотреть при использовании делегирования делегирования для обработки кликов на этом элементе управления из родительского элемента:
Это предотвращает клонирование любых обработчиков вместе с элементом при обновлении элемента управления.
JQuery должен заботиться о проблемах с браузером/более старым браузером.
Это работает на современных браузерах, которые я тестировал: Chromium v25, Firefox v20, Opera v12.14
Использование jquery 1.9.1
Следующее решение javascript также работало для меня в упомянутых выше браузерах.
У меня нет возможности протестировать IE, но теоретически это должно работать. Если IE отличается настолько, что версия Javascript не работает, потому что MS сделала это по-другому, метод jquery должен, по-моему, иметь дело с этим для вас, иначе было бы полезно указать на команду jquery вместе с метод, который требует IE. (Я вижу, что люди говорят, что «это не будет работать на IE», но не ванильный javascript, чтобы показать, как он работает на IE (предположительно «функция безопасности»?), Возможно, сообщать об этом как об ошибке для MS (если они будут считайте его таковым), чтобы он фиксировался в любой более новой версии)
Как упоминается в другом ответе, сообщение на форуме jquery
Но jquery теперь удалили поддержку тестирования браузера, jquery.browser.
Это решение javascript также работало для меня, это ванильный эквивалент метода jquery.replaceWith.
Важно отметить, что метод cloneNode не сохраняет связанные обработчики событий.
Но jquery.clone предлагает этот [* 1]
[* 1] jquery может сделать это, если события были добавлены с помощью jquery-методов, поскольку он хранит копию в jquery.data, это не работает иначе, так что это немного обман или обход и означает, что вещи не совместимы между различными методами или библиотеками.
Вы не можете получить привязанный обработчик событий непосредственно от самого элемента.
Вот общий принцип в javascript vanilla, это как jquery, так это все другие библиотеки (примерно).
Конечно, jQuery и другие библиотеки имеют все другие методы поддержки, необходимые для ведения такого списка, это всего лишь демонстрация.
Clear a File Input
You can just clone it and replace it with itself, with all events still attached.
Comments
Click on Clear button for more than 1 time does n’t work.
Same here, the example works only the first time.
Selecting a different file puts “changed” to the console.log but clicking on the “clear” link does nothing.
Win7/Chrome 26
I believe that it’s not working,because variable “controlBn” is assigned only once (the first time equals $(‘#control’). And as that element is being replaced with a new clone of it, the var “controlBn” may be pointing to an inexistent element after that.
I would put just :
$(‘#clear’).on(‘click’ ,function() <
$(‘#control’).replaceWith( $(‘#control’).val(»).clone( true ) );
>);
rather than the code above
(just a guess)
Как очистить ввод HTML-файла с помощью JavaScript?
Я знаю об установке источников на один и тот же метод . Но этот метод не стирает выбранный путь к файлу.
Внимание: Я бы не хотел перезагружать страницу, сбрасывать форму или выполнять вызов AJAX.
Возможно ли это?
20 ответы
Как насчет удаления этого узла, создания нового с тем же именем?
как вы имеете в виду, дайте мне пример, пожалуйста. — user188962
вы потеряете свои обработчики, например этот: var inputPhoto = document.getElementById (‘photoInput’); inputPhoto.addEventListener (‘изменить’, файл_хендлера, ложь); — Rui Martins
Проголосовал за отсутствие объяснения! — пользователь5871859
Есть 3 способа очистить ввод файла с помощью javascript:
установить свойство value в пустое или нулевое значение.
Работает с IE11 + и другими современными браузерами.
Создайте новый элемент ввода файла и замените старый.
Недостатком является потеря слушателей событий и свойств expando.
Сбросьте форму владельца с помощью метода form.reset ().
Чтобы не влиять на другие элементы ввода в той же форме владельца, мы можем создать новую пустую форму и добавить элемент ввода файла к этой новой форме и сбросить его. Этот способ работает во всех браузерах.
Я написал функцию javascript. демо: http://jsbin.com/muhipoye/1/
Не следует ли нам впоследствии удалить и созданную форму? — Андрей
Нет, не надо. элемент формы не добавлен к дереву документа страницы. — Cuixiping
Небольшое предупреждение: использование подходов 2 или 3 может иметь последствия для вас, если вы хотите сохранить события и другие атрибуты, которые были добавлены к элементу программно. В моем случае я добавил событие onclick к элементу формы, который исчез после сброса формы. В таком случае подход 1. лучше. (Это было отмечено для 2., но может случиться и для 3.) — Вольфи Ину
ТЛ; др: Для современных браузеров просто используйте
Старый ответ:
Мне все еще нужно понять, почему это так не работать с вебкит.
Во всяком случае, это работает с IE9>, Firefox и Opera.
Ситуация с webkit заключается в том, что я не могу вернуть его обратно в файл.
В IE8 ситуация такова, что он вызывает исключение безопасности.
Редактировать: Однако для webkit, Opera и firefox это работает:
(отметьте ответ выше с этим предложением)
Я посмотрю, смогу ли я найти более чистый способ сделать этот кросс-браузер без необходимости в GC.
Edit2:
Работает с большинством браузеров. Не работает с IE <9, вот и все.
Протестировано в Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 и IE10.
Установка значения на » работает не во всех браузерах.
Вместо этого попробуйте установить значение на null вот так:
РЕДАКТИРОВАТЬ: я получаю очень веские причины безопасности, не позволяя JS устанавливать ввод файла, однако кажется разумным предоставить простой механизм для очистка уже выбирал вывод. Я пробовал использовать пустую строку, но она не работала во всех браузерах, NULL работал во всех браузерах, которые я пробовал (Opera, Chrome, FF, IE11 + и Safari).
РЕДАКТИРОВАТЬ: Обратите внимание, что установка на NULL работает во всех браузерах, а установка пустой строки — нет.
К сожалению, я не вижу этого в all browsers . он не работает в IE8, IE9 или IE10 (но работает в IE11). — Freefaller
Черт возьми. Я не тестировал старые версии браузера IE. Прости. — БигМак66
К сожалению, ни один из приведенных выше ответов не охватывает все основы — по крайней мере, не с моим тестированием с ванильным javascript.
.value = null похоже, работает с FireFox, Chome, Opera и IE11 (но не IE8 / 9/10)
.cloneNode (И .clone() в jQuery) в FireFox, похоже, копирует .value over, что делает клон бессмысленным.
Итак, вот написанная мною ванильная функция javascript, которая работает в FireFox (27 и 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) . это единственные браузеры, доступные в настоящее время. мне потестить.
Компания ctrl параметр — это сам ввод файла, поэтому функция будет вызываться как .
ответ дан 19 мар ’14, в 12:03
Это ответ. Одна из проблем с таким количеством ответов на этот вопрос — не только на этой странице, но и при поиске по другим форумам, заключается в том, что вы можете очистить текст «3 файла выбрано», но на самом деле это не очистит файлы http. очередь. Что происходит тогда, так это то, что в следующий раз, когда вы пытаетесь загрузить, вы можете выбрать только один файл, и, что еще хуже, он будет сохранен в предыдущей папке с файлами. Этот ответ очистит оба, и вы сможете возобновить загрузку следующего набора файлов так же легко, как вы загрузили первый набор файлов. — ТАРКУС
Не следует if заявление должно быть помещено внутри catch блокировать? — Фахми
@Fahmi — нет, не должно — Freefaller
О, я думал, что IE8 / 9/10 выдаст исключение при попытке установить значение на null . Разумно объяснить, в чем смысл ставить ctrl.value = null; внутри try. catch тогда блокировать? Извините за новый вопрос. — Фахми
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl); — в какой момент мы фактически очищаем значение, поскольку cloneNode и копирует это? — Фахми
РЕШЕНИЕ
Следующий код работал у меня с jQuery. Он работает во всех браузерах и позволяет сохранять события и настраиваемые свойства.
Видеть этот jsFiddle для кода и демонстрации.
ССЫЛКИ
ответ дан 23 мая ’17, 13:05
Редактировать:
Этот не работает в IE и Opera, но, похоже, работает для Firefox, Safari и Chrome.
У меня это работает, хотя я всегда спрашиваю себя, как долго. — Пекка
это не работает, только в некоторых браузерах, а также установка значения входного файла является нарушением безопасности . не лучший выбор. — user188962
Вам нужно заменить его новым вводом файла. Вот как это можно сделать с помощью jQuery:
и используйте эту строку, когда вам нужно очистить поле ввода (например, в каком-то событии):
Создан 21 июля ’11, 23:07
Для замены исходного элемента это выглядит лучше: stackoverflow.com/questions/1043957/… — Мэнди Гао
На самом деле это довольно просто.
что собой представляет input.value = null — рабочий метод, однако он будет запускать только входные change событие, если вызывается из onclick мероприятие.
Решение этого было бы называть это onchange обработчик вручную всякий раз, когда вам нужно сбросить ввод.
Создан 27 июля ’20, 21:07
У меня была такая же проблема, и я придумал это.
ответ дан 29 окт ’18, 17:10
Я искал простой и чистый способ очистить ввод HTML-файла, приведенные выше ответы великолепны, но ни один из них действительно не отвечает на то, что я ищу, пока я не наткнулся в Интернете с простым элегантным способом сделать это:
ответ дан 26 мар ’19, в 09:03
..и тебе, дружище, это помогло мне при проверке и отображении ошибок в потенциальной загрузке файла. Это сбрасывается при ошибке и позволяет пользователю повторно загрузить тот же файл, если кто-то ищет что-то подобное. — Клинтон Доббс
Вот мои два цента, входные файлы хранятся в виде массива, вот как его обнулить
это возвращает пустой массив и работает во всех браузерах
ответ дан 27 апр.
Это сработало для меня. const clear = (событие) =>
ответ дан 14 авг.
Приведенные выше ответы предлагают несколько неуклюжие решения по следующим причинам:
Мне не нравится wrap что собой представляет input сначала, а затем получение html, это очень сложно и грязно.
Кроссбраузерный JS удобен, и кажется, что в этом случае слишком много неизвестных, чтобы надежно использовать type переключение (что, опять же, немного грязно) и настройка value в »
Итак, я предлагаю вам свое решение на основе jQuery:
Он делает то, что говорит, заменяет ввод своим клоном. У клона не будет выбран файл.
- Простой и понятный код
- Никакой неуклюжей обертки или переключения типов
- Кроссбраузерная совместимость (поправьте меня, если я ошибаюсь)
Результат: Счастливый программист
ответ дан 02 мар ’14, в 20:03
Cross browser compatibility . мое тестирование показывает, что FireFox копирует .value в качестве части .clone() , поэтому делая его бесполезным — Freefaller
@freefaller, почему бы не изменить значение перед вызовом replaceWith ? Я использую clone() я сам, и он отлично работает в firefox (я не знаю, так ли это у вас через год =)) — Абдо
@Abdo — если посмотреть на мой ответ вы увидите, что я — Freefaller
Вопрос не в jQuery; он спрашивает о javascript. — Арел
Мне помогло то, что я попытался получить и загрузить последний выбранный файл с помощью цикла, вместо того, чтобы очищать очередь, и это сработало. Вот код.
Надеюсь, это может кому-то помочь.
ответ дан 22 мар ’18, в 16:03
Я пробовал большинство решений, но, похоже, никто не работал. Однако я нашел прогулку по нему ниже.
Структура формы: form => label , input и submit button . После того, как мы выберем файл, его имя будет показано меткой, сделанной вручную в JavaScript.
Итак, моя стратегия такова: сначала отправить button отключен, после выбора файла кнопка отправки disabled Атрибут будет удален, и я смогу отправить файл. После отправки я очищаю label что делает вид, будто я очищаю файл input но на самом деле нет. Затем я снова отключу кнопку отправки, чтобы не допустить отправки формы.
Установив отправку button disable или нет, я останавливаю отправку файла много раз, если не выберу другой файл.
Clear upload file input field with jQuery
The value of an HTML file input field cannot be changed or reset (without doing a full form reset) for security reasons. The other day I read Bogdan Gusiev’s post about how to clear an upload file input field by resetting the HTML of a containing div to its intial state using Javascript and thought I’d take it one step further by doing this in jQuery and adding a clear button next to any file input field on a web page.
The HTML of any element can be reset with jQuery using the following function and passing in the id of the element’s parent. This will reset the HTML within the parent to its original state; it will lose any binding you’d added after the DOM was loaded (such as adding an event handler in $(document).ready). Here’s the Javascript for doing this:
In $(document).ready we can now add a div around every <input type=»file»> element with a clear button, binding a function to it which will reset the HTML of the div like so:
The file_input_index var is used so there can be a unique id for each containing <div> – it’s incremented inside the loop and used along with the «file_input_container_» prefix to have a unique id for each containing div.
$(‘input[type=file]’).each() will find all the file upload input fields and apply the div and button to it. Note that this will have to traverse the entire DOM so it’s not particularly optimal. If your forms all have a common unique id then it would be better to do something along the lines of $(‘#form input[type=file]’).each() to make it more efficient.
$(this).wrap() ads the containing div around the file input field.
$(this).after() then adds a button after the containing div which, when clicked, will reset the html of the containing div back to its initial state, thus clearing the value of the file upload input field. This will be on a new line because of the containing div; to make it appear to the right of the form input assign a class (or style) to the containing div which floats it to the left.
The nice thing about added the containing div and the button with jQuery in the document initialization is that you don’t need to add anything extra to your forms; it will be automatically added after the page has loaded.
Finally, here’s an example of the clearing file upload function. This doesn’t use the document initialization but is coded into the button itself.
Please note that if you are reading this in an RSS feed reader then the example above won’t work so you’ll need to click through to this post and view it in a web browser.