Sunday, October 28, 2012

Красивый file upload с jQuery

Каждый веб разработчик хоть раз да писал что-нибудь, что испольует форму файлового аплоада. Стандартная форма файловой загрузки ужасна. Как ее ни украшай стилями, она все равно остается ужасной и слабо поддающейся кастомизации. В очередной раз посмотрел я на уродливую форму стандартной загрузки файлов и пошел ресерчить альтернативы.

jQuery File Upload 

Проект лежит здесь: https://github.com/blueimp/jQuery-File-Upload
Примерчики здесь: http://blueimp.github.com/jQuery-File-Upload

Пример. Ниже реализована загрузка файла с прогресом. Будет одна кнопка Upload, которая позволит выбрать файл и сразу загрузить его на сервер.

1. Скачиваем.

Скачиваю отсюда https://github.com/blueimp/jQuery-File-Upload/downloads, распаковываю архивчик.

2. Копируем javascript и css файлы в свой проект.

Я буду пользоваться минимальной установкой, поэтому в свой проект копирую только некоторые файлы. Ресурсы моего проекта находятся в папке webapp/resources, в нее копирую следующие javascript файлики из архивчика:
- js/vendor/jquery.ui.widget.js
- js/jquery.iframe-transport.js
- js/jquery.fileupload.js
- css/jquery.fileupload-ui.css

Подробнее о минимальной установке здесь: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

3. Добавляем Bootstrap и jQuery

3.1. Файлик с jQuery берем здесь http://jquery.com/download/ и добавляем в проект.
3.2. Bootstrap берем здесь http://twitter.github.com/bootstrap/index.html. Добавляем файлы:
- css/bootstrap.css
- img/glyphicons-halflings.png
- img/glyphicons-halflings-white.png

4. Создаем страничку

Красиво отобразить JSP страничку в блоге не получилось, поэтому даю ссылку на файл jsp.
Полный текст JSP странички можно посмотреть здесь.

5. Пишем сервлет загрузки

Ничего особенного в сервлете нет, главное, чтобы он вернул JSON, по которому пройдемся в колбеке done.
Текст сервлета для этой странички можно глянуть здесь.

1 comment:

  1. 4. Создаем страничку
    ссылка на сервлет

    ReplyDelete