Отправка формы и файлов через Ajax

В процессе разработки страницы оформления заказа печати через интернет появилась проблема — при нажатии кнопки «Добавить в корзину» надо было сохранить на сервер прикрепленный клиентом файл. В предыдущих версиях, разрабатываемого мной сайта, все было просто — у формы выставлялся enctype=»multipart/form-data», а с помощью функции move_uploaded_file() файл перемещался в нужное мне место.
Сейчас же процесс добавления товара в корзину я написал на ajax, но, к сожалению, javascript метод XMLHTTPRequest не позволяет отправлять на сервер файлы. Меня выручила библиотека ScriptJava (кстати, умеет не только отправлять файлы через ajax — переходите по ссылке, там Вы найдете описание на русском языке, примеры и саму библиотеку).

Итак, как организовать отправку файлов через ajax.

1. Подключить библиотеку ScriptJava:

2. «Нарисовать» форму и кнопку на ней для выбора файла, например:

3. Написать функцию отправки файла, например:

Функцию взял с сайта разработчика, объясню в чем её суть:
formid — id нашей формы, он обязателен!
url — адрес на серверный скрипт который будет принимать файл
onstart — функция, которая выполняется при начале отправки файла на сервер
onsend — функция, которая выполняется после отправки файла на сервер
В примере, который я взял с сайта разработчика, в

передается статус того, что сейчас происходит. Нажали кнопку, увидели — «Название файла, начинаю отправку файла», закончилась загрузка, увидели «Название файла, файл успешно загружен».
Мне этот пример не очень понравился, поэтому я убрал

и при начале отправки файла на сервер стал показывать блок с gif картинкой-загрузки:

В итоге моя функция получилась следующая:

И осталось нам написать функцию для получения ответа от сервера — содержимое файла ajax.php может быть таким:

Смысл в том, что, если файлик у нас загрузился, т.е. размер файла больше 0 в функцию, которая выполняется после выполнения загрузки передается сообщение вида «Получен файл .имя файла. размером .размер файла. байт».
В моем случае мне это сообщение выводить не надо, поэтому оно играет больше отладочную роль 🙂

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

Что у меня происходит:
1. В переменную $uploaddir сохраняю адрес куда буду сохранять файл
2. В переменную $file_name_for_save сохраняю будущее название файла в виде: размерфайла_названиефайланакомпьютере
3. Перемещаю из временных файлов в нужную мне директорию с нужным мне названием.

Вот и все — отправка формы и файлов через Ajax не так уж и сложна.

4 комментария

Оставить комментарий

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