Обычная очистка значения на <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];
}
}
}
Приходится сбрасывать все значения в форме, т.к. сброс значения для отдельного элемента не предусмотрен. Способ громоздкий и текст в форме один раз мигает при перезаписи значений. Зато вышеописанная проблема исчезает. Если у кого-то есть идея получше, то пишите о ней в комментариях обязательно.
А что если удалить этот input из dom и добавить новый инстанс?
ОтветитьУдалитьЕсли в форме только инпуты, то, наверное, сработает. У меня в форме была таблица, а уже в ней инпуты. При таком раскладе ничего не получилось.
ОтветитьУдалитьНеправда!
ОтветитьУдалитьВсе работает с простым вариантом: ClearFile
Возможно, зависит от браузера. У меня Firefox 3.6. А ты в каком пробовал?
Кроме того, вроде достаточно даже этого:
document.getElementById('t_picture').value = '';
Может, правда, в опере будут проблемы. Не помню точно, надо проверять.
Пробовал в Mozilla 3.6, Opera 11.0, Chrome 8 и IE 8. Не работает ни в одном. Если бы работало, я бы такой фигнёй не занимался ))).
ОтветитьУдалить