Создание превью фото для формы

Авант СТО (5) Для лэндинг страниц и сайтов не желательна перезагрузка страницы при отправке форм. Лучше когда пользователь сразу видит результат работы на странице.

Имеем страницу и на ней форму

Здесь стоит уделить внимание блоку

Этот блок будет отображаться после загрузки фото и атрибут src у img будет подставляться после получения имени файла.

Самое главное для форм с загрузкой файлов это

указание enctype

Само поле для выбора файла

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

Но здесь мы постараемся отобразить фото пользователя прямо после выбора фотографии пользователем. Для этого будем использовать jQuery:

Не забываем подключать в head jQuery

и в head напишем следующий код

Здесь вешаем обработчик на тэг с id = broken-item событие change. Т.е. после изменения этого элемента (выбор файла) будем делать следующее:

fdata = new FormData(); // Создадим массив данных для отправки формы

fdata.append(‘broken-item’, $(‘#broken-item’)[0].files[0]); // добавим к массиву элемент broken-item с нашим файлом $(‘#broken-item’)[0].files[0] — именно так его писать, по другому не получалось.

Т.е. обычным serrialize не получится передать поле file в ajax отправке данных.

fdata.append — можно формировать свою форму — элемент и значение

Далее стандартный $.ajax в нем не забываем указать processData: false,contentType: false,

dataType: ‘json’ — необходимо для лучшего разбора данных

$(«#pv_img»).attr(«src»,»/upload/»+data.file); //меняем src у img
$(«#pv_div»).show(); //отображаем блок с фото

Файл al_foto.php

Здесь проверяем есть ли загрузка файла?

Проверяем на размер файла, если превышает тогда сохраняем ошибку.

Проверяем на существование ошибок, если нет тогда загружаем файл.

$rez[‘file’] = $fileName;  — сохраняем имя файла

Оператор echo json_encode($rez); выводит в браузер закодированные данные массива в формате json, чтобы мы в javascript смогли легче их получить.

 

Google Bookmarks Digg Reddit del.icio.us Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong
Запись опубликована в рубрике Новости с метками , , , , , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *