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.Текст сервлета для этой странички можно глянуть здесь.
4. Создаем страничку
ReplyDeleteссылка на сервлет