Просто о сложном.
В этом уроке мы сделаем небольшую AJAX форму для загрузки файлов, которая позволит посетителям загружать файлы с помощью технологии drag/drop или при помощи обычного выбора файлов.
Мы будем использовать плагины jQuery File Upload и jQuery Knob для отображения прогресса загрузки.
Т.к. форма будет иметь возможность загружать файлы двумя способами, она будет работать даже если drag/drop не поддерживается.
Как обычно, начнем с HTML5 разметки:
В теге нашего документа, подключаем шрифты Google Webfonts, а перед закрытием тега — JavaScript библиотеки: jQuery, jQuery Knob и jQuery File Upload.
Главный элемент страницы — форма #upload. Внутри нее элемент #drop (принимает файлы с использованием drag&drop) и список, в котором будут отображаться загружаемые файлы. Разметка, которая будет генерироваться для загруженных файлов:
Элемент input будет спрятан с помощью CSS. Он нужен для инициализации плагина jQuery Knob, который будет рисовать шкалу процесса загрузки файла. Input имеет атрибуты data-*, которые используются для обновления шкалы. Позже, когда мы будет отслеживать прогресс загрузки, мы будем обновлять эти значения для перерисовки шкалы. span будет содержать зеленую галку или красный крест.
jQuery
У посетителя будет 2 способа загрузки файла:
- Перетащить файл в окно браузера (в IE не работает).
- Нажатием на кнопку browse. Будет имитировано нажатие на спрятанный input и показано системное окно выбора файлов. Обратите внимание, что input имеет параметр multiple параметр, что позволит выбирать много файлов за один раз.
Когда файлы будут выбраны, они помещаются в очередь для последующей автоматической загрузки:
В jQuery File Upload есть собственный интерфейс, но мы используем базовую версию плагина для создания собственного дизайна интерфейса. И чтобы наш интерфейс работал, мы передаем плагину несколько параметров / колбэков:
- dropZone – этот параметр содержит jQuery селектор, который будет принимать перетаскиваемые файлы. Файлы, брошенные на него, будут добавлены в очередь загрузки.
- add – функция вызывается при добавлении файла в очередь загрузки. Она будет генерировать разметку для файлов и вызвать метод data.submit() .
- progress – Эта функция будет вызываться каждые 100ms (можно изменить). Второй аргумент содержит размер файла и количество загруженных байт. Это позволяет отслеживать прогресс и обновлять шкалу.
- fail – функция вызывается при возникновении ошибки.
В комплект jQuery File Upload входит также и PHP скрипт для обработки файлов на сервере, но мы напишем свой. Процесс загрузки фалов будет происходить также как и при обычной загрузке, поэтому всю информацию о них мы можем получить из глобального массива $_FILES:
Как уже говорилось, файлы будут помещаться в очередь и загружаться друг за другом, поэтому обрабатывать на PHP очень легко.
How to use only the Basic plugin (minimal setup guide)
The plugin download package comes with a complete user interface based on Bootstrap.
However, if you want to build your own user interface, it is possible to use only the basic plugin version and a minimal setup.
The following is an alternative to index.html with only the minimal requirements and a simple done callback handler (see API and Options on how to use the different options and callbacks):
Response and data type
The example above sets the dataType option to json, expecting the server to return a JSON response for each uploaded file. However it’s also possible to handle HTML content types as response or any other dataType that you can handle in your done handler.
How to display upload progress with the basic plugin
The fileupload plugin triggers progress events for both individual uploads (progress) and all running uploads combined (progressall). Event handlers can be set via the event binding mechanism or as widget options (see API and Options documentation):
The previous code assumes a progress node with an inner element that displays the progress status via its width percentage:
The inner element should have a different background color than the container node, set via CSS and needs a height applied:
How to tie a file to an element node during the life cycle of an upload
Often, you will display a file to upload in an element node. This can be done in the add callback.
To be able to refer to the same element node in other callbacks related to the upload, you can make use of the context option (which is actually an option of jquery.ajax):
How to start uploads with a button click
Based on the previous example, it’s possible to start uploads on the click of a button instead of automatically:
How to do Client-side Image Resizing
Please have a look at the API and Options documentations.
Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.
В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое — что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress, то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).
Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.
Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.
Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели.
AJAX Загрузка файлов: общий пример
Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега
