Создание превью изображений с помощью HTML5 File API и jQuery и отправка их на сервер с использованием AJAX

Содержание:

  1. Множественный выбор файлов, создание превью на стороне клиента и отправка данных ajax’ом на сервер
  2. Добавляем прогресс-бар
  3. Готовые решения для загрузки изображений на сервер

1. Множественный выбор файлов, создание превью на стороне клиента и отправка данных ajax-ом на сервер

В примере представлен код для множественного выбора файлов, их валидации (проверка на формат и размер) и загрузки их с помощью ajax на сервер.

Подключаем jQuery

Форма для выбора, отображения и отправки файлов:

JS код создания превью и отправки формы:

Демо (выберите изображения, для которых нужно создать превью):

Данные из примера на сервер попадут в следующем виде:

Стили, используемые в примере:

2. Добавляем прогресс-бар.

Добавляем в код формы html-код прогресс-бара:

Добавляем css-код:

JS-код:

Результат:

Подробнее про индикацию прогресса в JS.

3. Готовые решения для загрузки изображений на сервер

DropzoneJS — создаёт область для перетаскивания файлов и загружает их на сервер
jQuery.fileapi — библиотека для работы с FileAPI от mail.ru