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

Все мы знаем, что загружать изображения через AJAX нельзя, но хотелось бы эту ситуацию хотя бы эмулировать.

Суть: Есть форма, где, в частности, предусмотрена загрузка фотографии на сервер. В дизайне это выглядит примерно так — в форме есть большая кнопка для загрузки изображения (их может быть несколько, кнопок т.е, добавяются динамически), по нажатию на которую открывается окно выбора файла. Далее, когда пользователь выбрал файл, кнопка исчезает и на её месте появляется свежезагруженная фотка. Далее пользователь проделывает ту же операцию с остальными кнопками (добавляя при необходимости новые кнопки) и нажимает кнопку «отправить», после чего вся введенная им инфа сохраняется.

Насколько я понимаю, такой финт можно сделать только при помощи iframe, хотелось бы подробностей, т.к попытался заюзать jQuery Right Uploader, но ничего из этой затеи не вышло. Возможно, потому что для стилизации формы выбора файла я использую еще один jQuery-плагин (jInputFile кому интересно).

Стилизованная кнопка по размеру совпадает с будущим изображением, может тоже пригодится.

Буду благодарен за любую помощь, заранее всем спасибо.
  • Вопрос задан
  • 50469 просмотров
Решения вопроса 1
Стандартное решение:
— Создаём форму отправки и скрытый iframe.

<form enctype=multipart/form-data action=index.php method=post name=loadavatar target=hiddenframe> <input type=hidden name=MAX_FILE_SIZE value=64000> <input id=avatarfile name=avatarfile type=file> </form> <iframe id=hiddenframe name=hiddenframe style="width:0px; height:0px; border:0px"></iframe>

Форма отправки может быть стилизована, как Вам угодно (своя кнопка отправки или выбора файла). На форме нужно обязательно расположить input [type=file] (выбор картинки) и input [name=MAX_FILE_SIZE](ограничитель размера файла). У формы target должен ссылаться на скрытый iframe (в примере hiddenframe). При отправке файла target выполнит перезагрузку (поэтому если не использовать скрытый iframe, то у нас перезагрузиться родительская страница).

Далее всё предельно просто — либо по нажатию кнопки submit, либо по вызову document.forms["loadavatar"].submit() отправляем форму; скрытый iframe перезагружается и файл оказывается на сервере. После чего его можно запросом получить с сервера (или сразу вернуть в скрытый iframe) и отобразить.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
avalak
@avalak
Сделать это только на клиенте не возможно.
Надо сначала отправить на сервер, потом клиенту отправить превьюшку, а затем по желанию клиента сохранить/удалить файл на сервере.

Это возможно на чистом JS (cпасибо, HTML5) но нужен fallback для старых браузеров.
Тут есть пример превьюшки изображения без загрузки на сервер www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files.
Ответ написан
@xTNTx
Fine uploader — JS + server-side. Сохраняем изображение на сервере, callback отображает его юзеру. После сабмита добавляем изображениям статус подтвержденных. Периодически запускаем сборщик мусора, который удаляет загруженные, но не подтвержденные изображения.
Ответ написан
CKOPOBAPKuH
@CKOPOBAPKuH
www.slideshare.net/kuchinskaya/ss-14802024/1
github.com/mailru/FileAPI

реализован предпросмотр до загрузки и ресайз на клиенте. в новых браузерах через html5 и canvas, в старых флеш и iframe.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
NWCode Санкт-Петербург
от 100 000 руб.
Finch Москва
от 120 000 до 150 000 руб.
TrendAgent Санкт-Петербург
от 80 000 до 140 000 руб.