VPF::Динамические поля формы (input type='files')

Black

Дата 28.4.2006, 12:55 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

Репутация: 4
Всего: 45

Код


<script type='text/javascript'>
var files = 2;
var count = 3;

  function AddFile()
  {
    ++files;

    var input_file = document.createElement('input');
    input_file.name = 'files['+files+']';
    input_file.type = 'file';

    document.getElementById('new_files_'+count).appendChild(input_file);
    document.getElementById('new_files_'+count).innerHTML += "<br /><div id='new_files_"+(count+1)+"'></div>";

    ++count;
  }
</script>

<body>

<form action='name.php' method='post' enctype='multipart/form-data'>
    <input name='files[0]' type='file'><br />
    <input name='files[1]' type='file'><br />
    <input name='files[2]' type='file'>
    <div id='new_files_3'></div>
</form>

    <br /><button onclick='AddFile();return false;'>Добавить файл</button>

</body>

Хочу сделать возможность неограниченного вложения файлов в форму. Вот что получилось, однако, это работает только в Opera и FireFox.
IE, курит в сторонке. Не могу придумать, как заставить IE так же нормально обрабатывать этот код.

В чем проблема?

Просто если нажать на кнопку Добавить файл появляется новое поле type='file', в IE оно нормально добавляется на страницу.
Просто при отсылке формы это новое поле как бы не существует. Видимо это поле не приклеивается к форме... вот надо придумать, как заставить IE увидеть новое поле формы для загрузки файлов.

--------------------

Могу все, но ничего не умею :-)

Burrr

Дата 28.4.2006, 13:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Точно знаю, что такая фишка работает кроссбраузерно, если вместо appendChild и работы с узлами использовать innerHTML.
Пример можно посмотреть на сайте http://foto.mail.ru , если залогиниться и перейти на страницу добавления фотографий, там есть рабочая форма, где фотки добавляются по описанному принципу.
Так что, если не выйдет с нодами - юзаем innerHTML smile

.

Добавлено @ 13:10
Вот, попробуй:

Код


<body>
<script type='text/javascript'>
var files = 2;
var count = 3;
  function AddFile()
  {
    ++files;
    document.getElementById('new_files_'+count).innerHTML = "<input type=file name=files["+files+"]>";
    document.getElementById('new_files_'+count).innerHTML += "<br /><div id='new_files_"+(count+1)+"'></div>";
    ++count;
  }
</script>
<form action='name.php' method='post' enctype='multipart/form-data'>
    <input name='files[0]' type='file'><br />
    <input name='files[1]' type='file'><br />
    <input name='files[2]' type='file'>
    <div id='new_files_3'></div>
</form>
<br /><button onclick='AddFile();return false;'>Äîáàâèòü ôàéë</button>
</body>

--------------------

JavaScript на fastcoder, sqlinfo.ru

12345c

Дата 28.4.2006, 16:04 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Интересно, описывалась похожая проблема с полями ввода, но с Мозиллой.

Black

Дата 29.4.2006, 07:46 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

Репутация: 4
Всего: 45

Burrr, да, через innerHTML все работает. Спасибо.

--------------------

Могу все, но ничего не умею :-)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »