Загрузка изображений и отображение без перезагрузки страницы?
Все мы знаем, что загружать изображения через AJAX нельзя, но хотелось бы эту ситуацию хотя бы эмулировать.
Суть: Есть форма, где, в частности, предусмотрена загрузка фотографии на сервер. В дизайне это выглядит примерно так — в форме есть большая кнопка для загрузки изображения (их может быть несколько, кнопок т.е, добавяются динамически), по нажатию на которую открывается окно выбора файла. Далее, когда пользователь выбрал файл, кнопка исчезает и на её месте появляется свежезагруженная фотка. Далее пользователь проделывает ту же операцию с остальными кнопками (добавляя при необходимости новые кнопки) и нажимает кнопку «отправить», после чего вся введенная им инфа сохраняется.
Насколько я понимаю, такой финт можно сделать только при помощи iframe, хотелось бы подробностей, т.к попытался заюзать jQuery Right Uploader, но ничего из этой затеи не вышло. Возможно, потому что для стилизации формы выбора файла я использую еще один jQuery-плагин (jInputFile кому интересно).
Стилизованная кнопка по размеру совпадает с будущим изображением, может тоже пригодится.
Буду благодарен за любую помощь, заранее всем спасибо.
Форма отправки может быть стилизована, как Вам угодно (своя кнопка отправки или выбора файла). На форме нужно обязательно расположить input [type=file] (выбор картинки) и input [name=MAX_FILE_SIZE](ограничитель размера файла). У формы target должен ссылаться на скрытый iframe (в примере hiddenframe). При отправке файла target выполнит перезагрузку (поэтому если не использовать скрытый iframe, то у нас перезагрузиться родительская страница).
Далее всё предельно просто — либо по нажатию кнопки submit, либо по вызову document.forms["loadavatar"].submit() отправляем форму; скрытый iframe перезагружается и файл оказывается на сервере. После чего его можно запросом получить с сервера (или сразу вернуть в скрытый iframe) и отобразить.
А если я хочу файл отобразить до того, как пользователь нажмет submit? В этом то вся фича, чтобы пользователь выбрал картинку, посмотрел на неё, а уже потом отправил форму.
Сделать это только на клиенте не возможно.
Надо сначала отправить на сервер, потом клиенту отправить превьюшку, а затем по желанию клиента сохранить/удалить файл на сервере.
«как отправить фото на сервер, и получить от него ответ, не перезагружая страницу?»
— А я Вам на какой вопрос ответил? Я привел стандартное решение данной проблемы.
в iframe возвращается javascript, который говорит parent.uploaded('{pic_id}'), где uploaded — функция родительской страницы, которая и показывает превью по id-шнику
Сделал всё, как вы написали. Работает, фото отображаются. Но возникает следующая проблема: Если фоток несколько, то приходится каждый input оборачивать в отдельную форму, т.к иначе при submit'е формы отправляется сначала одно фото, потом два фото, потом три фото и т.д. При оборачивании каждого фото в отдельную форму каждый раз отправляется только одно фото, что, собственно, и правильно.
Но возникает следующая проблема: Если помимо загрузки файлов в форме есть другие элементы, то получаются вложенные формы, которые не работают.
Посмотрите habrahabr.ru/qa/26563/, я там Anexroidу ответил.
Общая логика в том, что:
1). У формы action='экшон обработки изображений';
2). на input[type=file] ставится onchange=«submit()»;
3). картинка начинает грузиться сразу после выбора ее в селекте;
4). в ответе iframe убиваем заполненный инпут, ставим на его место превьюху;
5). Если по-прежнему нужно сохранить форму «как бы нормально по нажатию кнопки» — jQuery.ajax return false, чтоб опять не уйти в сохранение изображений;
Сделать это только на клиенте не возможно.
Надо сначала отправить на сервер, потом клиенту отправить превьюшку, а затем по желанию клиента сохранить/удалить файл на сервере.
Можно использовать flash или, как предложили выше, загрузить на сервер и отобразить с него.
Я помню в Q&A уже был вопрос про превьюшки в браузере. Там был список основных вариантов реализации.
Fine uploader — JS + server-side. Сохраняем изображение на сервере, callback отображает его юзеру. После сабмита добавляем изображениям статус подтвержденных. Периодически запускаем сборщик мусора, который удаляет загруженные, но не подтвержденные изображения.
