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

377
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
  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>

  1. Создать input и заменить им существующий. Однако в таком случае будут потеряны все обработчики событий, которые были добавлены на старый input.
  2. Обернуть 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

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

  1. запомнить значения всех других полей;
  2. ресетнуть всю форму document.getElementById("file-rorm").reset();
  3. вернуть значения других полей обратно.
READ ALSO
Как при прокрутке изменить стиль?
javascript

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

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

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

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

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

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

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

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

 266
How to make names clickable in Google Maps? [требует правки]
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?

 252