Jquery file upload не работает

jQuery File Upload

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

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

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

Доступно две версии плагина. В 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) с другими платформами

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

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

В противном случае появляется обилие UNEXPECTED TOKEN всех мастей. » — irsick

Источник

jQuery File Upload

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

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

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

Доступно две версии плагина. В 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) с другими платформами

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

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

В противном случае появляется обилие UNEXPECTED TOKEN всех мастей. » — irsick

Источник

JQuery-File-Upload не удается с довольно большими файлами

Наш сервер приложений — это FreeBSD 11.2 с Apache 2.4.39 и PHP 7.2.17. Я скачал их демо и получаю сообщение об ошибке net::ERR_CONNECTION_RESET в консоли браузера при попытке загрузить что-нибудь достаточно большое, чтобы точно превысить 22 секунды. Похоже, это связано с сервером, так как я скачал ту же самую демонстрацию на другой сервер CentOS7, где загрузка того же файла прошла успешно.

Несмотря на то, что я проверил все мои переменные PHP на максимальный размер загружаемого файла, лимит памяти и т. Д., Будет ли эта демонстрация зависеть от переменных PHP? Я нашел параметр RequestReadTimeout Apache на сервере, который не работает, его нет на рабочем сервере, поэтому я подумал, что это может быть причиной, но я изменил этот параметр с .

. и перезапустил Apache, но результат тот же. Разработчики на этом сервере считают, что эта проблема возникла только после того, как были сделаны последние обновления сервера, включая Apache 2.4.33, обновленный до Apache 2.4.39. Версия PHP не изменилась, однако было обновлено много других пакетов, а также исправлений безопасности для ОС FreeBSD. Может кто-нибудь подсказать, что может решить эту проблему?

Хорошо, это легко дублируется. Я раскрутил виртуальную машину с новой установкой FreeBSD 11.2, установил Apache 2.4.39 и демонстрацию этого проекта. Я настроил эти параметры в демонстрационном приложении, чтобы позволить загружать большое видео mp4 .

. и получить то же самое Unknown error ровно через 22 секунды в ходе загрузки файла mp4 размером

493 МБ. В Apache должна быть настройка, для которой требуется больше времени или других ограничений. И, возможно, изменение в порте FreeBSD Apache 2.4 где-то между 2.4.33 и 2.4.39. Мои разработчики говорят, что все началось после этого обновления.

Источник

Как правильно настроить jQuery File Upload?

Пытаюсь настроить загрузчик файлов «jQuery File Upload». Отображение на странице вроде настроил — выборка, старт загрузки и отмена функционируют.

На скриншотах видно, что файлы добавляются, а по нажатию на кнопку «Start upload» запускается обработчик.

Что делать дальше не могу понять. На официальном сайте нет конкретных примеров. В репозитории на гитхабе в тестах тоже ничего не понял.

А не могу я понять конкретно содержание обработчика: как формировать необходимый json ответ и так далее.

Надеюсь на вашу помощь.

• Вопрос задан более трёх лет назад
• 11056 просмотров

Изучайте UploadHandler.php
Там довольно понятный код

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

Сделать это можно в функции post в UploadHandler
Так же надо не забывать что файл можно моментально удалить,в функции delete нужно очищать сессию от удаленного файла.

Источник

AJAX загрузка файлов на сервер с помощью jQuery

В этой заметке вы узнаете, как реализовать AJAX загрузку файлов на сервер с использованием jQuery. Это не так уж сложно!

Не знаю точно, но что-то мне подсказывает, что до появления jQuery загрузка файлов на сервер по AJAX технологии была чем-то очень непонятным, а значит крайне сложным. Но сегодня с появлением jQuery даже не обладающий опытом веб-мастер может сделать это без особых усилий. Однако, так или иначе, разобраться все же придется. И сейчас я попробую очень коротко и понятно объяснить вам, как это делается, а чтобы проще было воспринимать, урок содержит только нужное и разбит на шаги.

Замечу заранее, что эта статья вряд ли поможет, если вы совсем плохо разбираетесь в jQuery и PHP, базовые знания обязательны. И, пожалуй, обязательно иметь хоть какой-то опыт в загрузке файлов (картинок) на сервер с обычной HTML формы, по крайней мере нужно представлять как это работает.

Ну, меньше слов, приступим!

Для начала предположим, что у нас есть такой HTML код: поле и кнопка загрузки:

1. Получение данных файла из поля file

Первое что нам нужно сделать — это получить данные input поля при добавлении в него файла(ов). Для этого прикрепим к событию change свою функцию, которая установит данные файла:

Этот код сохранит данные поля type=»file» в переменную files , с которой мы будем работать дальше.

2. Загружаем файлы по клику

Теперь, нам нужно повесить событие клика на кнопку » Загрузить файлы «. Тут и будет посылаться AJAX запрос с данными файлов.

Создадим функцию, повесим ее на событие click и отправим AJAX запрос с данными файлов. Этот запрос отличается от обычного AJAX запроса, и тут не подходит обычная отправка POST данных:

Что делает функция? Создает новый объект new formData() , добавляет в него данные файлов из массива files . Затем этот объект данных формы передается в AJAX запрос. 2 параметра нужно установить в false обязательно:

• processData — потому что jQuery будет конвертировать массив files в строку, и сервер не сможет получить данные.
• contentType — потому что дефолтные установки jQuery равны application/x-www-form-urlencoded , что не предусматривает отправку файлов. А еще, если установить этот параметр в multipart/form-data , похоже это ничего не даст.

3. Загрузка файлов на сервер

Чтобы наглядно показать, как обрабатывать отправленный во втором пункте запрос, приведу простой php-скрипт, без всяких проверок.

Создадим файл submit.php и добавим в него этот код (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):

Не используйте этот код напрямую! Пишите свой!

Заключение

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

Чтобы не собирать весь вышеописанный код вручную, скачайте вот этот архив: ajax-file-upload.zip . Загрузите его содержимое на ваш php сервер, зайдите в паку из архива, и попробуйте загрузить файл. Вы увидите, как все это работает, сможете «пошаманить» над кодом и разобраться подробнее в реальных условиях.

Также, рекомендую к прочтению статью о базовых знаниях для создания AJAX запросов в WordPress:

Знания из этой статьи вам очень пригодятся при создании AJAX загрузки файлов под WordPress.

Источник