Загрузка и превью изображений без перезагрузки страницы?

Question

[Никита Колосов]

Сделал всё, как описано тут



Работает, фото отображаются. Однако, если фоток несколько, то приходится каждый input оборачивать в отдельную форму, т.к иначе при submit'е формы отправляется сначала одно фото, потом два фото, потом три фото и т.д. При оборачивании каждого фото в отдельную форму каждый раз отправляется только одно фото, что, собственно, и правильно.



Но возникает следующая проблема: Если помимо загрузки файлов в форме есть другие элементы, то получаются вложенные формы, которые не работают.



Вопрос — что делать в такой ситуации?

Comments

[Никита Колосов]

Пока что, единственно решение, которое пришло в голову — после загрузки изображения, заменять в котором был input file, на изображение и с именем изображения, а при нажатии кнопки submit вставлять тег вокруг нужных данных и делать submit уже внешней формы.

Пример:
Было:

...
<input type="text" name="data1" />
...
<form action="#">
   <input type="file" name="photo" />
</form>
<form action="#">
   <input type="file" name="photo" />
</form>
<form action="#">
   <input type="file" name="photo" />
</form>
...
<input type="text" name="data2" />
...

Стало:

...
<form action="#">
...
<input type="text" name="data1" />
...
<input type="hidden" name="photo[]" value="filename1" />
<img src="/preview/filename1" />
<input type="hidden" name="photo[]" value="filename2" />
<img src="/preview/filename2" />
...
<input type="text" name="data2" />
...
</form>
...

Но что то мне подсказывает, то есть более простое решение

[Elendai]

Хе. А не всегда можно оборачивать. Проблема, с которой столкнулся сам когда-то: форма добавления товара в интернет-магазине.
И, Anexroid, ваше решение не подойдет, потому как форма уже должна быть, чтоб и без загрузки изображений можно было создать (изменить) товар. Ну или закопаться в js.
Решение было найдено такое:

<form method="POST" enctype=multipart/form-data" action="экшон сохранения картинки" target="saveFrame">
Наименование <input type="text" value="стул" name="name"/>
<input type="file" multiple="multiple" name="loadfile[]" onchange="submit()"/>
</form>
<iframe id="hFrame" style="display: none" name="saveFrame"/>

А саму форму мы сериализуем и сохраняем аяксом c return false.

[Elendai]

Простите, но код не подкрасился.
Да и не дописал… утро…
Так вот. Я бы при ответе iframe — «window.parent.afterImageLoaded();» удалял бы ненужный уже инпут и всего делов.
Хочется все сохранить (доп. данный) — аякс. Не хочется — хмем крестик у картинки, по которому вместо превью встает пустой инпут.

Answer 1

[FedLab]

может подойдет еще blueimp.github.com/jQuery-File-Upload/

Answer 2

[Сергей Протько]

kellishaver.tumblr.com/post/21428272282/using-the-file-api-to-preview-images-before-uploading + github.com/Jahdrien/FileReader для старых браузеров. Это если делать все не задействуя сервер вообще, только на клиенте.

Для вашей же беды… не вижу ничего сложного в том, что бы все инпуты были в одной форме.

<form method="POST" enctype=multipart/form-data" action="backend.php">
    <input type="file" name="preview[]" />
    <input type="file" name="preview[]" />
    <input type="file" name="preview[]" />
</form>

Скажем… при нажатии на кнопку attach добавляйте в скрытую форму еще один инпут и ссылайтесь уже на новое поле. И т.д. и т.д. Хотя поидее если вам нужно сразу после выбора файла отображать данные, то опять же проблемы с тем что одна картинка на запрос не будет.

Что-то в этом духе. Вообще мультиаплоадеров много, которые работают и в старых браузерах.

Comments

[Никита Колосов]

Вот именно, что загрузка изображение и последующий вывод превью срабатывает по событию onchange файлового input'a

[dk-web]

Никита Колосов: Никита, вы решили вопрос? сейчас уже битый час бьюсь об стену.. .ровным счетом такой же вопрос!