Массовая ajax-загрузка картинок на сервер с помощью jQuery

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

I. Проектирование базы данных

Нам понадобится две таблицы – это users и user_uploads, в первой будем хранить информацию о пользователях (id, username, password и т.д.), во вторую же будем записывать информацию о загруженных изображениях.

II. Код Javascript (jQuery)

Добавим обработку формы загрузки изображений, основную задачу будет выполнять jquery.wallform.js, для работы которого нам необходимо подключить jQuery. После выбора нужных картинок срабатывает функция $("#photoimg").change(function(){}), где "photoimg" – идентификатор поля типа "file". Данная функция как раз вызывает .ajaxForm(), которая и выполняет ajax – отправку файлов на сервер. Результат выводится в блок с ID: "preview".

III. PHP обработка

PHP обработка состоит из трех пунктов(файлов) – это конфиг и подключение к базе данных, генерация формы и загрузки файлов на сервер.

1) db.php – подключение к базе данных;

2) index.php – создание формы

3) ajaxImageUpload.php – обработка формы, загрузка изображений на сервер

IV. Добавляем CSS стили для блоков

Вот и все! При желании данный скрипт легко переделать под загрузку любых файлов на сервер. Также не забываем выставить права на запись для необходимой директории.

Скачать готовый скрипт можно здесь.

загрузка комментариев