вернуть input type='file' в первоначальное состояние

326

16 августа 2017, 20:29

Имеется форма для загрузки файла на сервер в которой множество полей

<form method="post" action="" id="file-rorm"> ... <input id="documentscan" type="file" name="documentscan" accept="application/pdf"/> ... </form>

Если пользователь выбрал файл у себя на компьютере - с помощью JS проверяется его тип и размер

document.getElementById("documentscan").addEventListener("change", checkFile);
function checkFile() {                    
var file = document.getElementById("documentscan").files[0];
if (file.type !== "application/pdf") {
alert("Вы пытаетесь загрузить недопустимый файл");
}
else if (file.size > 5212880) {
  alert("Допустимый размер файла до 5МБ");
}}

Если выбранный файл не валидный пользователю показывается соответствующие уведомления, но элемент <input id="documentscan" type="file" name="documentscan" accept="application/pdf"/> так и остается с выбраним файлом.

Как сделать reset конкретного input в форме чтоб не ресетить всю форму?

Answer 1

Установить value в пустую строку или null. В старых браузерах этот вариант вполне может не сработать.

document.getElementById("clear").addEventListener("click", function() { 
    document.getElementById("file").value = ""; 
});

<form> 
  <input value="Saved value" /> 
  <input id="file" type="file" /> 
  <input id="clear" type="button" value="Clear" /> 
</form>

Создать input и заменить им существующий. Однако в таком случае будут потеряны все обработчики событий, которые были добавлены на старый input.
Обернуть input в "искусственную" форму, после чего сделать reset этой формы и вернуть input на место:

document.getElementById("clear").addEventListener("click", function() { 
    var form = document.createElement("form"); 
    var file = document.getElementById("file"); 
    var fileParent = file.parentNode; 
    var fileNextSibling = file.nextSibling; 
    form.appendChild(file); 
    form.reset(); 
    fileParent.insertBefore(file, fileNextSibling); 
});

<form> 
  <input value="Saved value" /> 
  <input id="file" type="file" /> 
  <input id="clear" type="button" value="Clear" /> 
</form>

На базе этого ответа.

Answer 2

Так попробуйте

file.value = '';

Answer 3

Если других полей в форме не много (не в вышеописанном случае), то можно:

запомнить значения всех других полей;
ресетнуть всю форму document.getElementById("file-rorm").reset();
вернуть значения других полей обратно.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как при прокрутке изменить стиль?

Есть следующий код

319

javascript

Как кастомизировать компоненты React Bootstrap?

Создатели React перенесли Bootstrap под свою гребенкуПри работе с данной библиотекой React-Bootstrap, возник вопрос, как кастомизировать стили компонентов?...

242

javascript

Убрать пробелы вначале в инпуте?

У меня есть функция onChange, где в стейт записываю то, что ввели в инпут

219

javascript

How to make names clickable in Google Maps? [требует правки]

Why in Google Maps I can click on all geographic names by this link and can not for this linkHow to make names clickable?

198