Input file удалить выбранный файл

Обновлено: 21.01.2025

Решение jQuery, которое @ dhaval-marthak разместил в комментариях, очевидно, работает, но если вы посмотрите на реальный вызов jQuery, довольно легко увидеть, что делает jQuery, просто установив value атрибут в пустую строку. Так что в «чистом» JavaScript это будет:

Спасибо! Если у вас уже есть ссылка на jquery, $ input.val ("") будет работать как обычно. @ 2ndGAB Хм . У меня только 45.0.1, поэтому я не могу проверить . кто-нибудь еще? @ 2ndGAB Исправление, Мой Firefox только что обновился до 46.0.1, и этот код все еще работает там. Можешь подтвердить?

Вам нужно завернуть <input type = “file”> в <form> теги, а затем вы можете сбросить ввод, сбросив форму:

Это правильный метод. Он работает во всех браузерах и не вступает в противоречие с какими-либо средствами защиты, которые реализуются браузерами, чтобы не допустить, чтобы мошеннические скрипты возились с входным файлом .value. Классно, не для меня, хотя, потому что он также сбрасывает другие поля в этой форме. Аналогичное решение JQuery может быть $("form").get(0).reset(); . .get(0) Возвращает фактический элемент формы , так что вы можете использовать reset() функцию.

Это ЛУЧШЕЕ решение:

Я проверял это во всех браузерах (он даже поддерживает IE8).

Есть ли какая-то конкретная причина для сброса input.type тоже? Установка только значения '' дает ожидаемый результат. Для этого нужно больше голосов или что-то в этом роде, я нашел слишком много времени, чтобы найти этот ответ, это единственный, который я нашел, который работает в IE. input.value = '' создает исключение для консоли в IE11. Однако сброс input.type работает во всех браузерах без каких-либо ошибок.

Если у вас есть следующее:

тогда просто сделайте:

сбросить управление файлом.

Вы можете просто клонировать его и заменить собой, со всеми прикрепленными событиями:

К сожалению, это не сбрасывает входное значение, смотрите это jsFiddle . Для лучшего решения, смотрите этот ответ . @RogerRussel: Точно . Мне было интересно, почему верхние ответы говорили, что это работает только один раз, что является явным индикатором того, что какая-то ссылка теряется. И это действительно так, потому что изначально была создана ссылка для ввода, которая впоследствии была заменена новым элементом ввода. Просто сбросить value подобное в других ответах кажется гораздо более простым, чем манипулирование DOM.

Другое решение (без выбора элементов HTML DOM)

Если вы добавили прослушиватель события 'change' на этот вход, то в коде javascript вы можете вызвать (для некоторых указанных условий):

Например в HTML:

Это будет работать только с именами файлов, которые содержат только один . перед расширением файла. Правильно, я отредактировал код и предоставил более универсальный подход для получения расширения файла.

РЕШЕНИЕ

Следующий код работал для меня с JQuery. Он работает в любом браузере и позволяет сохранять события и пользовательские свойства.

Смотрите этот jsFiddle для кода и демонстрации.

ССЫЛКИ

См. Как сбросить ввод файла с помощью JavaScript для получения дополнительной информации.

@alessadro, нет, просто элемент <input type="file"> с определенным идентификатором. Это самое чистое и наиболее совместимое с браузером решение, которое я когда-либо нашел - спасибо.

Сбросить кнопку загрузки файла так просто, используя чистый JavaScript !

Есть несколько способов сделать это, но простой и понятный способ, который хорошо работает во многих браузерах, заключается в том, чтобы изменить значение поля на ноль, таким образом, поле загрузки будет сброшено, также попробуйте использовать чистый JavaScript, а не какую-либо инфраструктуру, я создал код ниже, просто проверьте его (ES6):

@AnandChoudhary это работает и в jQuery, но вы можете заменить const file = document.querySelector ('. File'); с const file = $ ('. file'); или просто сделайте $ ('. file'). val (""); опустошить его

Особенно для угловых

Будет работать, но если вы используете Angular, он скажет, что «значение свойства» не существует для типа «HTMLElement'.any».

Читайте также: