Как очистить input type=file

"очистить input file" - сколько способов существует очистить "input type=file"?

Подробно с примерами очищаем поле выбора файла.

1. javascript - очистка поля ввода type=file
2. javascript - очистка поля ввода type=file(2)
3. jQuery - очистим поля ввода type=file

Javascript - очистка поля ввода type=file

С самого начала давайте приведем рабочий пример очистки поля выбора файла!

Пример: очистить поле ввода type=file

Для того, чтобы проверить работу примера очитки поля ввода вам потребуется:

Выбрать любой файл на вашем компьютере нажав кнопку "выбрать файл".

И второе - нажмите кнопку "очисти поле выбора файла"

очисти поле выбора файла

Пример кода очистки поля type=file

Для того, чтобы создать рабочий пример нам понадобится:

Тип file(поле для загрузки файлов)

Добавим ему id, чтобы вы могли к этому полю обратиться

<input type="file" id ="example">

Кнопка для очитки поля файл

Для кнопки нам нужен тег button.

Для того, чтобы отследить нажатие нам нужен onclick.

Обращаемся к нашему id с помощью getElementById

document.getElementById('example')

Ну и последнее добавляем value в js

.value='';

Соберем весь код примера очитки поля файле:

<input type="file" id ="example">

<button onclick="document.getElementById('example').value='';">очисти поле выбора файла</button>




Javascript - очистка поля ввода type=file

Как вы знаете способов сделать onclick - 3 штуки... первый самый простой и короткий в смысле написания я рассмотрел выше...

Смысл тот же, но только onclick второй способ...

Для того, чтобы очистить поле выбора файл с помощью javascript - нам понадобится:

Опять поле type="file" + id изменим на "example1"

<input type="file" id ="example1">

Снова кнопка "button" и добавим к ней "id", чтобы вы могли к ней обратиться...

<button id ="id_button">очисти поле выбора файла</button>

И onclick вынесем в отдельный тег script, подробно останавливаться не буду... здесь все просто...

<script>document.getElementById('id_button'). onclick=function(){document.getElementById('example1').value='';}</script>

Соберем второй пример очитки поля ввода файл.

<input type="file" id ="example1">

<button id ="id_button">очисти поле выбора файла</button>

<script>document.getElementById('id_button'). onclick=function(){document.getElementById('example1').value='';}</script>

Живой пример очистить поле выбора файла

Для того, чтобы протестировать работу очитки поля type="file" вам понадобится:

Выбрать файл.

Очистить поле выбора файла.

очисти поле выбора файла



JQuery - очистим поля ввода type=file

И последним рассмотрим очищение поля файла с помощью jQuery...

Для этого нам понадобится...

подключить jquery

Поле выбора файла:

<input type="file" id ="example2">

Кнопка для очистки поля выбора файла:

<button id ="id_button2">очисти поле выбора файла</button>

JQuery - код очитки поля файла

Обращаемся к id

Сделать click

Добавить "val"

<script>$( "#id_button2" ).click(function() { $('#example2').val(''); });</script>

Соберем весь код очистки поля файла в jQuery

<input type="file" id ="example2">

<button id ="id_button2">очисти поле выбора файла</button>

<script>$( "#id_button2" ).click(function() { $('#example2').val(''); });</script>

Пример работы кода очистки поля файла в jQuery

Для того, чтобы протестировать работe кода очистки поля файла в jQuery вам нужно:

Выбрать файл.

Очистить поле выбора файла

очисти поле выбора файла