Очистка поля ввода файла в HTML с помощью JavaScript

Быстрый ответ

Простейший способ очистить поле выбора файла в JavaScript — это присвоить свойству value пустую строку: fileInput.value = ''. Этот метод эффективен в большинстве современных браузеров. Если вы поддерживаете старые версии браузеров, замените элемент на его копию:

let fileInput = document.getElementById('yourFileInputId');
fileInput.value = ''; //Таким образом поле выбора файла очищается

// Для старых браузеров необходим полный сброс:
if (fileInput.value) {
    let clone = fileInput.cloneNode(); // Создаём копию элемента
    fileInput.parentNode.replaceChild(clone, fileInput); // Заменяем элемент на его копию
}

В качестве варианта можно присвоить null свойству value:

fileInput.value = null; // Для очистки поля используется null

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

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

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

let fileInput = document.getElementById('yourFileInputId');
let newInput = document.createElement('input');
newInput.type = 'file'; // Создаём новый элемент input типа 'file'
fileInput.parentNode.replaceChild(newInput, fileInput);

Подробнее об этом расскажет наш спикер на видео

Сохранение обработчиков событий и атрибутов

При замене поля выбора файла может возникнуть необходимость сохранить обработчики событий и атрибуты. В таком случае создайте копию элемента и сбросьте значение value у нового элемента:

let fileInput = document.getElementById('yourFileInputId');
let newInput = fileInput.cloneNode(); // Создаём копию элемента
newInput.value = '';
fileInput.parentNode.replaceChild(newInput, fileInput);

Работа с непредсказуемым поведением браузеров

Браузеры могут вести себя непредсказуемо, поэтому для обработки исключений используйте блок try-catch:

try {
    fileInput.value = ''; // Обычная попытка очистить поле в новых браузерах
    if (fileInput.value) throw new Error('Не удалось очистить поле выбора файла');
} catch (e) {
    let newInput = fileInput.cloneNode(); // Создаём копию элемента в случае ошибки
    fileInput.parentNode.replaceChild(newInput, fileInput);
}

Визуализация

Представьте, что поле выбора файла — это скутер (🛵), который везёт кружку с кофе (☕) — это и есть файл.

До: 🛵💨 с кружкой ☕

Теперь вы выпили кофе, и пустую кружку нужно выбросить:

document.getElementById('fileInput').value = ''; // Прощай, кружка! ☕👋

И в итоге остаётся:

После: 🛵💨 без ☕

Скутер снова готов к новому поездке в Starbucks!

Дополнительные замечания и альтернативные способы

Очистка поля выбора файла через AJAX, без сброса формы

Для удаления данных файла без перезагрузки страницы или сброса формы можно использовать AJAX запрос:

let fileInput = document.getElementById('yourFileInputId');
let formData = new FormData();
formData.append('file', fileInput.files[0]);

// Отправляем данные через AJAX (например, с помощью Fetch API)
fetch('your-server-endpoint', {
    method: 'POST',
    body: formData
}).then(() => {
    fileInput.value = ''; // После успешной отправки, очищаем поле
}).catch((error) => {
    console.error('Ошибка:', error);
});

Советы для пользователей Internet Explorer 11 и более ранних версий

Для IE11 и его предшественников удостоверьтесь, что используемые методы не устарели и до сих пор работают корректно.

jQuery

Для разработчиков, привыкших к jQuery, может подойти следующее решение: оборачивайте элемент в форму, сбрасывайте форму, затем удаляйте обёртку:

$('#yourFileInputId').wrap('<form>').closest('form').get(0).reset();
$('#yourFileInputId').unwrap(); // Быстрая и удобная очистка поля выбора файла

Тестирование — залог надёжности

Тщательно протестируйте ваше решение в различных условиях и браузерах, чтобы быть уверенными в его надёжности. И помните об особенностях работы с полем выбора файла в JavaScript.

Полезные материалы

1. javascript – Очистка <input type='file' /> с помощью jQuery – Stack Overflow — Обсуждение методов jQuery для очистки поля выбора файла.
2. .val() | Документация jQuery API — Официальная документация jQuery о методе .val(), используемом для очистки значений.
3. HTML Стандарт — Информация об атрибуте value элемента <input> в соответствии с HTML спецификацией.
4. Учебное видео на YouTube – Очистка поля выбора файла в JavaScript — Видеоинструкция по очистке поля выбора файла.
5. Открыть gists · GitHub — Ресурс с примерами кода на GitHub Gist, включая примеры для очистки полей выбора файла.