HTML+CSS+JavaScript

Мне надо сделать, так чтобы форма принимала неограниченное число
инпутов типа file.
То есть чтобы user мог присоединить к своему тексту картинок сколько захочет.
Видимо надо некий скрипт придумать, который по событию ввода
пути к файлу (полного имени файла я хотел сказать), добавлял бы к форме ещё один инпут.
И ещё именование этих инпутов хотелось бы продумать,
чтобы я потом в PHP скрипте без регулярок обошёлся.
Есть идеи?
Или готовый скрипт?

<form><input type="file" name="images[]" onChange="add(this.form)" /></form> <script type="text/javascript"> function add(form) {   var files = form.getElementsByTagName("input");   var free = false;   for (var i=0; i<files.length; i++)   {     if (files[i].type!="file" || files[i].length) continue;     free = true;     break;   }   if (free)   {     var _file = document.createElement("input");     _file.setAttribute("type", "file");     _file.setAttribute("name", "images[]");     _file.setAttribute("onChange", "add(this.form)");     form.appendChild(_file);   } } </script>

Круто!
И работает даже в Опере!
Голова!
Спасибо!

Забыл спросить.
Это кроссбраузерно?

не совсем. гляньте эту тему http://softtime.ru/forum/read.php?id_forum=4&id_theme=43466&page=1

Да уж!
Тема супер интересная!
Только получается, что для IE
бесполезно даже пробовать?
Всё равно работать не будет?
Или вы как-то выкрутились?

>>Только получается, что для IE
>>бесполезно даже пробовать?
>>Всё равно работать не будет?
Там же сразу и ответ дан.

Для IE, атрибуты элемента нужно прописывать прямо в функции createElement(). А для других браузеров, с помощью приесвоения.

<form><input type="file" name="images[]" onChange="add(this.form)" /></form>  <script type="text/javascript">  function add(form)  {    var files = form.getElementsByTagName("input");    var free = false;    for (var i=0; i<files.length; i++)    {      if (files[i].type!="file" || files[i].length) continue;      free = true;      break;    }    if (free)    {      var _file = document.createElement("input");      _file.type = "file";      _file.name = "images[]"      _file.onchange = function() { add(this.form); }      form.appendChild(_file);    }  }  </script>

Там же написано, что реализация глючная получается!
Может, я не так вашу переписку понял?

To bronenous: Спасибо!
Буду осмысливать : - )

Если вы про мой тестик, то да. Там функция без поправки для ИЕ.
Я просто хотел показать, что в ИЕ, некорректно созданные элементы, а значит, не имеющие атрибута NAME, все-таки передают на сервер данные, в том числе и сам аттрибут NAME. Как бы парадаксально это не звучало. :) В этом и был глюк.

Т.е. в принципе, оно, как бы, работает корректно в ИЕ и без поправки, но является неправильным подходом. Не по технологии, скажем так. :)

Мое дело, лишь предупредить. Ваше - делать, а значит и решать, как именно делать. :)

А вообще, вот вам скриптик, который сам Хеопс, как-то выкладывал на форуме.

<form enctype='multipart/form-data' method=post> <table>   <tr>     <td><input type="file" size="32" name="att[]" class=input></td>     <td><input type="button" name="drop" value=" &minus; " onclick="dropFile(this);">         <input type="button" value=" + " onclick="addFile(this);"></td>   </tr> </table> <input class=button type=submit value='Загрузить'> </form> <script language='JavaScript1.1' type='text/javascript'> <!-- function dropFile(btn) {   if(document.getElementById)   {     while (btn.tagName != 'TR') btn = btn.parentNode;     btn.parentNode.removeChild(btn);   } } function addFile(btn) {   if(document.getElementById)   {     while (btn.tagName != 'TR') btn = btn.parentNode;     var newTr = btn.parentNode.insertBefore(btn.cloneNode(true),btn.nextSibling);     thisChilds = newTr.getElementsByTagName('td');     for (var i = 0; i < thisChilds.length; i++)     {       if (thisChilds[i].className == 'files') thisChilds[i].innerHTML = '<input size="32" name="att[]" class=input type="file">';     }   } } //--> </script>

Это красиво смотрится!
Буду примериваться.
Спасибо!