Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Очистить INPUT TYPE=file (https://javascript.ru/forum/misc/20906-ochistit-input-type%3Dfile.html)

Nitro_Generate 22.08.2011 14:12

Очистить INPUT TYPE=file
 
Всем доброго времени суток, столкнулся с такой проблемой, имеется поле с типом файл, для загрузки файлов на сервер естественно. Если пользователь указал в поле файл, а потом передумал его загружать, и хочет очистить поле, то обычными средствами, кнопка "delete", "backspace" поле не очистить, я решил прибегнуть к JS нашел функцию реализующую мою идею на библиотеки JQ, но движок сайта использует свою библиотеку, по сему получается конфликт библиотек, точнее говоря переменных общих. Начал искать скрипт не требующий библиотек, к сожалению ничего не нашел путевого, все что я нашел, сбрасывает всю форму, а мне нужно только 1 поле . По этому прошу помощи у вас.:cray:

DooMer 22.08.2011 14:23

у формы есть кнопка "reset", это точно должно помочь

nikita.mmf 22.08.2011 14:58

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_;
}

ksa 22.08.2011 15:15

Цитата:

Сообщение от Nitro_Generate
Начал искать скрипт не требующий библиотек, к сожалению ничего не нашел путевого

Как уже посоветовал DooMer...

<form>
	<input id='test' type='file' />
	<input type='reset' value='Reset' />
</form>

B@rmaley.e><e 22.08.2011 15:17

Цитата:

Сообщение от DooMer
у формы есть кнопка "reset", это точно должно помочь

У формы есть метод reset.
Цитата:

Сообщение от nikita.mmf
elem.id && input_.id = elem.id;
elem.className && input_.className = elem.className;

ReferenceError²
Цитата:

Сообщение от nikita.mmf
parent_.insertBefore( input_, elem );
parent_.removeChild( elem );

Есть же replaceChild.

Nitro_Generate 22.08.2011 16:51

В форме куча полей для заполнения.
Резетом мы снесем все поля.
А мне надо из всех полей снести значение только в одном, имеющим тип файл.

ksa 22.08.2011 16:56

Цитата:

Сообщение от Nitro_Generate
В форме куча полей для заполнения.

Разделяй и властвуй! :)

devote 22.08.2011 18:41

соглашусь с nikita.mmf удаляй поле из DOM и вставляй пустое обратно, самое простое решение...

Nitro_Generate 23.08.2011 15:08

Очередная идея, очистить всю форму, а обратно вставить все кроме файлов
<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 поля. Зато остальные сохраняются.

systemiv 23.08.2011 15:21

Помоему это такой явный костыль.
http://rubydev.ru/2011/01/rubyonrails_dry/


Часовой пояс GMT +3, время: 03:11.