Обычная очистка значения на <input type="file"> никак не повлияет, поэтому придётся прибегнуть к разным хитростям. В большинстве статей на эту тему предлагается следующее решение:
<form id="fMain" method="post" enctype="multipart/form-data" action="myAction.php"> <div id="dFile"> <input type="file"> <input type="button" value="Очистить" onclick="ClearFile('dFile');" /> </div> </form>
function ClearFile(idFileContainer) { var container = document.getElemetnById(idFileContainer); //Разметка элементов перезаписывается и текущее значение исчезает container.innerHTML = container.innerHTML; }
Такой подход выполняет поставленную задачу. Однако он обладает одной очень неприятной особенностью. Если пользователь очистит файловое поле, а потом опять выберет файл, то этот файл не отправится на сервер (точную причину такого поведения я не знаю). Это очень серьёзная ошибка в логике работы файлового поля, поэтому я предлагаю менее красивый, но правильно работающий способ:
<form id="fMain" method="post" enctype="multipart/form-data" action="myAction.php"> <input type="file"> <input type="button" value="Очистить" onclick="ClearFile('fMain');" /> </form>
function ClearFile(idForm) { var form = document.getElementById(idForm); //Массив значений всех элементов формы var values = new Array(form.elements.length); //Запись значений всех элементов формы for (var i = 0; i < form.elements.length; i++) { values[i] = form.elements.item(i).value; } form.reset(); //Сброс значений всех элементов формы //Восстановление значений всех элементов формы, кроме input file for (var i = 0; i < form.elements.length; i++) { //Здесь сравнивается тип, т.к. используется один input file //Если элементов input file больше, то нужно использовать id if(form.elements.item(i).type != 'file') { form.elements.item(i).value = values[i]; } } }
Приходится сбрасывать все значения в форме, т.к. сброс значения для отдельного элемента не предусмотрен. Способ громоздкий и текст в форме один раз мигает при перезаписи значений. Зато вышеописанная проблема исчезает. Если у кого-то есть идея получше, то пишите о ней в комментариях обязательно.