Pull to refresh

jQuery File Upload

Reading time2 min
Views182K
Ура! Еще один, свеженький… чем он лучше других?



а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support



Быстрое подключение



Доступно две версии плагина. В Bootstrap'е и в Jquery UI
Если вам приспичит полностью переделать интерфейс, то вот голая версия плагина

Подробнее

Как настроить плагин?


Используем jQuery File Upload (версию UI) для PHP.

То что идет в коробке с плагином полностью работоспособно, остается только залить это себе на сервер.

Качаем, распаковываем, заливаем распакованное на наш сервер ( папку можно переименовывать ).
Пробуем запустить демо страницу для проверки работоспособности.

Учтите, что заливка файлов работает для всех, и эти же файлы могут быть скачаны так же всеми. Самый простой способ защиты — поставить пароль на папку с залитыми файлами через .htaccess.

Используем jQuery File Upload (версию UI) для Google App Engine

Качаем плагин, распаковываем, редактируем файл app.yaml для подмены «jquery-file-upload» на ваш собственный App ID. Заливаем в server/gae-python или server/gae-go ( в зависимости от среды разработки) как ваш App Engine instance.
Залейте папку jQuery-File-Upload (корневую) на любой сервер, после редактирования поля form action target на ваш урл к вашему App Engine instance.

Использование jQuery File Upload (версию UI) с Node.js


Вы можете установить пример на Node.js на ваш сервер через npm.
npm install blueimp-file-upload-node

Запуск сервиса:
./node_modules/blueimp-file-upload-node/server.js

Качаем архив с плагином, распаковываем, правим index.html и настраиваем путь в form action на ваш Node.js ( типа «localhost:8080»).
Вы можете залить папку с проектом ( без ненужных файлов) на любой сервер и использовать его как интерфейс для вашего сервиса по заливке файлов на Node.js.

Использование jQuery File Upload (версию UI) с другими платформами

Подробнее здесь github.com/blueimp/jQuery-File-Upload/wiki/Setup

Ps. рекомендации с комментариев


«при связке Apache+PHP нужно дать веб-серверу право на запись в папки files и thumbnails (в Ubuntu его зовут, например www-data). Для проверки на работоспособность можно просто выставить '777' на эти папки, но это потенциально небезопасный путь.

В противном случае появляется обилие UNEXPECTED TOKEN всех мастей. »
irsick
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
Total votes 215: ↑206 and ↓9+197
Comments118

Articles