Форумы или почтовые бары часто должны поделиться большим количеством фотографий. Плохой способ загрузки изображений - загрузить их на центральный сервер, а затем перенаправить их на статический сервер изображений. В этой статье представлено, как использовать PLUPLOAND для оптимизации процесса загрузки и обойти сервер для непосредственной загрузки изображений в пакетах в облако Youpai. В этой статье рассказывается о следующих ключевых моментах:
Кода -копия выглядит следующим образом:
Библиотека Plupload
Локальное сжатие картин
Многочисленные картинки
Обходить сервер и загрузить изображения непосредственно на Youpaiyun
Использование API http form
Конфигурация Plupload
Библиотека Plupload
Plupload - это очень богатый плагин загрузки изображения. Браузеры с низкой версией могут поддерживать партийные загрузки через Flash/Silverlight/HTML4, в то время как в браузерах с более высокой версией им будет приоритет загрузки с использованием интерфейса HTML5. Все это автоматическое, и можно сказать, что это очень удобно в использовании! Во -вторых, Plupload также поддерживает такие функции, как сжатие изображений на клиенте и загрузка их непосредственно на перетаскивание. Для получения подробной информации вы можете перейти на его официальный сайт, чтобы узнать больше информации.
Здесь мы используем только его основной API, просто представляем файл.
Кода -копия выглядит следующим образом:
<script src = "lib/plupload-2.1.2/js/plupload.full.min.js"> </script>
Основные примеры API, приведенные чиновником, очень просты, вы можете напрямую просмотреть их по адресу http://www.plupload.com/examples/core. Нет никаких трудностей в понимании основного API. Если вам нужна помощь, вы можете задать мне вопрос позже в этой статье.
Локальное сжатие картин
Как правило, качество изображений, которые вы просматриваете на веб -страницах, не высокое. Я помню, что, когда я изучал PS в старшей школе, учитель сказал, что разрешение онлайн -картинок будет 72, а печатные картинки должны будут составлять 300. Поэтому, когда пользователи загружают большую фотографию, лучше использовать его для сжатия изображения локально на клиенту пользователя и загружать сжатые меньшие изображения, что не повлияет на эффективность для перехода на переработку, но также ускоряет скорость нагрузки и снижает нагрузку на серверы.
Локальная функция сжатия изображения поддерживается в Plupload, просто пропустите параметр изменения размера при его инициализации. Среди них ширина и высота могут быть установлены в соответствии с фактической ситуацией, а качество является относительно важным параметром. Как следует из названия, чем меньше значение установлено, тем меньше изображение, но тем хуже будет качество дисплея. Вам нужно взвесить это самостоятельно.
Кода -копия выглядит следующим образом:
{
"изменить размер": {
«Ширина»: 200,
«высота»: 200,
«Качество»: 70
}
}
Многочисленные картинки
Одним из предпосылок для загрузки картинок является возможность выбирать несколько картин. Многочисленные файлы являются стандартной функцией HTML5. Мы можем включить режим с несколькими сериями следующими способами:
Кода -копия выглядит следующим образом:
<form action = "xxx">
Выберите Images: <input type = "file" name = "img" MALTY> <!- Несколько- это ключ здесь! ->
<input type = "Отправить">
</form>
Согласно разделу «Выбор нескольких файлов» в поддержке браузера jQuery-File-Upload, IE разработал до IE10, что он только начал поддерживать функции HTML5, поэтому мы должны использовать магическую мощность Flash для поддержки изображений с несколькими селектами для браузеров с более низкими версиями. К счастью, Plupload помогла нам сделать это, и этот переключатель включен по умолчанию. Если вы думаете, что вам не нужно использовать многобранные изображения, вы можете установить multi_selection: false, чтобы отключить эту функцию.
Обходить сервер и загрузить изображения непосредственно на Youpaiyun
Youpaiyun предоставляет API HTTP Form API. Через этот интерфейс мы можем напрямую инициировать запрос на загрузку изображений из браузера без необходимости переноса через наш собственный сервер, что значительно уменьшает накладные расходы.
Использование API http form
Используя этот интерфейс, вам нужно отправить форму в Youpaiyun. Эта форма содержит файл, который вы хотите загрузить, а также должны включать политику и подпись. Политика используется для передачи параметров, связанных с запросами на загрузку, такими как путь сохранения, тип файла, результаты предварительной обработки и т. Д., А также включает в себя время гранта запроса на загрузку и т. Д. Подпись используется для проверки безопасности.
Для демонстрационного удобства мы используем JavaScript непосредственно для создания политики и подписи здесь. Но в фактическом использовании, по соображениям безопасности, пожалуйста, заполните этот процесс на стороне сервера. Следующий код был изменен на основе официальной демонстрации, в основном с использованием официальной тестовой учетной записи. Для конкретного метода генерации этих двух параметров, пожалуйста, см. Официальный документ: http://docs.upyun.com/api/form_api/.
Кода -копия выглядит следующим образом:
var options = {
«ведро»: «демонстрация»,
'save-key': '/test/filename.txt',
«Исток»: math.floor (new Date (). getTime () / 1000) + 86400
};
// Смотрите больше параметров: http://docs.upyun.com/api/form_api/#form api интерфейс Введение
var policy = window.btoa (json.stringify (options));
// Получите API формы от Backend Management User Unlun
var form_api_secret = '1+jy2zqd5uvfw6hq8esyqo50wo =';
// Рассчитайте подпись
VAR Signature = MD5 (Police + '&' + form_api_secret);
Конфигурация Plupload
Как заставить PluploAd работать с HTTP -формой YouPaiyun API действительно вызвало у меня головную боль. В документе, просмотрев Plupload, неожиданное открытие заставило меня увидеть рассвет. Загрузка соединения на Amazon S3 привлекла меня. Полное имя Amazon S3 - Amazon Simple Service, а услуги облачного хранения, которые он предоставляет более или менее похожи на сервисы Youpaiyun.
Таким образом, на основе введения в конфигурацию браузера в этой статье я выяснил конфигурацию, необходимую для загрузки ее в Youpaiyun. На самом деле, очень просто сказать, в основном настройка двух параметров URL и Multipart_params. Options.bucket, политика и подпись в следующих примерах непосредственно используются для расчета значений в предыдущем разделе.
Кода -копия выглядит следующим образом:
var uploader = new plupload.uploader ({
...
URL: 'http://v0.api.upyun.com/' + options.bucket,
multipart_params: {
'' Filename ':' $ {filename} ', // добавление этого, чтобы сохранить согласованность через время выполнения
'Content-Type': '',
«Политика»: политика,
«подпись»: подпись,
},
...
});
Суммировать
Таким образом, мы, наконец, поняли, что обход сервера через Plupload и загрузку изображений в партии в Youpaiyun. Plupload - это действительно очень мощная библиотека, но ее можно взимать за коммерческое использование. Пожалуйста, перейдите на его официальный сайт, чтобы узнать больше!
Разве это не очень просто? Главное, что идея очень хорошая и стоит изучать. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и все добьются прогресса вместе