Очистить INPUT TYPE=file
Всем доброго времени суток, столкнулся с такой проблемой, имеется поле с типом файл, для загрузки файлов на сервер естественно. Если пользователь указал в поле файл, а потом передумал его загружать, и хочет очистить поле, то обычными средствами, кнопка "delete", "backspace" поле не очистить, я решил прибегнуть к JS нашел функцию реализующую мою идею на библиотеки JQ, но движок сайта использует свою библиотеку, по сему получается конфликт библиотек, точнее говоря переменных общих. Начал искать скрипт не требующий библиотек, к сожалению ничего не нашел путевого, все что я нашел, сбрасывает всю форму, а мне нужно только 1 поле . По этому прошу помощи у вас.:cray:
|
у формы есть кнопка "reset", это точно должно помочь
|
function clearInputFile ( elem ) {
var parent_ = elem.parentNode,
input_ = document.createElement("input");
input_.type = "file";
input_.name = elem.name;
elem.id && input_.id = elem.id;
elem.className && input_.className = elem.className;
parent_.insertBefore( input_, elem );
parent_.removeChild( elem );
return input_;
}
|
Цитата:
<form> <input id='test' type='file' /> <input type='reset' value='Reset' /> </form> |
Цитата:
Цитата:
Цитата:
|
В форме куча полей для заполнения.
Резетом мы снесем все поля. А мне надо из всех полей снести значение только в одном, имеющим тип файл. |
Цитата:
|
соглашусь с nikita.mmf удаляй поле из DOM и вставляй пустое обратно, самое простое решение...
|
Очередная идея, очистить всю форму, а обратно вставить все кроме файлов
<form action="<?=$h?>new.html" method="post" id="fMain" enctype="multipart/form-data" name="add" >
<input id="f1" type="file" name="logo[]" />
<input type="button" value="Удалить" onclick="ClearFile1('fMain');" />
<br /><input id="f2" type="file" name="logo[]" />
<input type="button" value="Удалить" onclick="ClearFile2('fMain');" />
<br /><input id="f3" type="file" name="logo[]" />
<input type="button" value="Удалить" onclick="ClearFile3('fMain');" />
<br /><input id="f4" type="file" name="logo[]" />
<input type="button" value="Удалить" onclick="ClearFile4('fMain');" />
function ClearFile1(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();
for (var i = 0; i < form.elements.length; i++)
{
if(form.elements.item(i).id != 'f1')
{
form.elements.item(i).value = values[i];
}
}
}
function ClearFile2(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();
for (var i = 0; i < form.elements.length; i++)
{
if(form.elements.item(i).id != 'f2')
{
form.elements.item(i).value = values[i];
}
}
}
function ClearFile3(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();
for (var i = 0; i < form.elements.length; i++)
{
if(form.elements.item(i).id != 'f3')
{
form.elements.item(i).value = values[i];
}
}
}
function ClearFile4(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();
for (var i = 0; i < form.elements.length; i++)
{
if(form.elements.item(i).id != 'f4')
{
form.elements.item(i).value = values[i];
}
}
}
Пометил каждое поле файл формата своим id для того что бы очищать единственное поле а не все сразу продублировал скрипт 4 раза. Для каждого поля своя функция и свой id Не работает, очищает сразу все 4 поля. Зато остальные сохраняются. |
Помоему это такой явный костыль.
http://rubydev.ru/2011/01/rubyonrails_dry/ |
А почему не устраивает вариант с удалением и вставкой нового? Некоторые браузеры умеют очищать поле присванием value пустой строки. Зачем четыре функции, а если будет на странице десять форм, то функций станет десять?
Ваша идея может быть реализована, например, так
function ClearFile ( idForm ) {
var form = document.getElementById(idForm),
formElem,
values = [],
i = 0;
for ( ; (formElem = form.elements[i++]); ) {
if ( /^(?:radio|checkbox)$/.test( formElem.type ) ) {
values[i] = formElem.checked;
} else if ( formElem.nodeName.toLowerCase() == "select" ) {
values[i] = formElem.selectedIndex;
} else if ( formElem.nodeName.toLowerCase() != "fieldset" && formElem.type != "file" ) {
values[i] = formElem.value;
}
}
form.reset();
for ( i= 0; (formElem = form.elements[i++]); ) {
if ( /^(?:radio|checkbox)$/.test( formElem.type ) ) {
formElem.checked = values[i];
} else if ( formElem.nodeName.toLowerCase() == "select" ) {
formElem.selectedIndex = values[i];
} else if ( formElem.nodeName.toLowerCase() != "fieldset" && formElem.type != "file" ) {
formElem.value = values[i];
}
}
from = formElem = null;
}
|
Странно, разве напрямую нельзя манипулировать с value такого поля?
document.getElementById('f1').value = ''
Я вроде делал что-то похожее... |
Цитата:
|
popov654,
можно, но не во всех браузерах, в IE6 точно нельзя |
Цитата:
|
попробуй удалить элемент и заново его создать
очистится все.. и значение, и обработчики событий. |
Ах ты ж ё моё :)
Так вот почему после перезагрузки фрейма с трекером в моём парсере я не мог программно изменить значение такого поля! :D Что ж Вы мне тогда не подсказали про эту особенность, столько времени убил зря)) |
Цитата:
|
| Часовой пояс GMT +3, время: 07:21. |