Установка jQuery. AJAX загрузка файлов на сервер с помощью jQuery Последняя версия jquery min js

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

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

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

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

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

Загрузить файлы

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

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

// Переменная куда будут располагаться данные файлов var files; // Вешаем функцию на событие // Получим данные файлов и добавим их в переменную $("input").change(function(){ files = this.files; });

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

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

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

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

// Вешаем функцию ан событие click и отправляем AJAX запрос с данными файлов $(".submit.button").click(function(event){ event.stopPropagation(); // Остановка происходящего event.preventDefault(); // Полная остановка происходящего // Создадим данные формы и добавим в них данные файлов из files var data = new FormData(); $.each(files, function(key, value){ data.append(key, value); }); // Отправляем запрос $.ajax({ url: "./submit.php?uploadfiles", type: "POST", data: data, cache: false, dataType: "json", processData: false, // Не обрабатываем файлы (Don"t process the files) contentType: false, // Так jQuery скажет серверу что это строковой запрос success: function(respond, textStatus, jqXHR){ // Если все ОК if(typeof respond.error === "undefined"){ // Файлы успешно загружены, делаем что нибудь здесь // выведем пути к загруженным файлам в блок ".ajax-respond" var files_path = respond.files; var html = ""; $.each(files_path, function(key, val){ html += val +"
"; }) $(".ajax-respond").html(html); } else{ console.log("ОШИБКИ ОТВЕТА сервера: " + respond.error); } }, error: function(jqXHR, textStatus, errorThrown){ console.log("ОШИБКИ AJAX запроса: " + textStatus); } }); });

Что делает функция? Создает новый объект 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 запрос):

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:

This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.

link Downloading jQuery using Bower

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher :

link Cross-Browser Testing with jQuery

Be sure to test web pages that use jQuery in all the browsers you want to support. The site makes available virtual machines for testing many different versions of Internet Explorer. Older versions of other browsers can be found at oldversion.com .

link jQuery Pre-Release Builds

The jQuery team is constantly working to improve the code. Each commit to the Github repo generates a work-in-progress version of the code that we update on the jQuery CDN. These versions are sometimes unstable and never suitable for production sites. We recommend they be used to determine whether a bug has already been fixed when reporting bugs against released versions, or to see if new bugs have been introduced.

link Using jQuery with a CDN link Other CDNs

The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host ; check the site"s documentation.

Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.

Первый вопрос, возникающей в начале работы с билиотекой jQuery - как подключить её к сайту? Есть два варианта: подключать с другого сайта или скачать её к себе на сервер.

Подключение JQuery к сайту1. Первый и самый простой - используете файл с другого сайта . Для этого достаточно одной строки перед закрывающим тегом head Вашей страницы:

В данном коде указано подключение билиотеки с Google API. У данного способа есть и преимущества, и недостатки. Плюсом будет то, что данный тип подключения используется на многих сайтах и, допустим, если пользователь уже заходил на подобный сайт, то она библиотека у него закэширована и не требует новой загрузки. Минусом же является то, что Вы зависите от стороннего сервера - его возможные проблемы с загрузкой становятся Вашими.

2. Вы загружаете на сервер свой файл библиотеки

Последнюю версию jQuery можно скачать с главной страницы официальнго сайта: jquery.com .

Скачиваем файл. В корневой директории (папке) сервера создаём папку js (если её нет) и закачиваем файл туда. Допустим файл называется jquery-1.10.1.js . Пример подключения ниже:

Строка с подключением к файлу jQuery ложна быть первой в списке подключаемых js-файлов (если у Вас имеются другие подключения js).

Также хочу обратить внимание на то, что подключение к jQuery должно быть на Всех страницах, где он используется. Подключения на одной из страниц мало.

Как уже говорилось, многие популярные CMS сегодня уже поставляются с jQuery, и ВордПресс не исключение. Однако, если библиотеку не подключают плагины, то jQuery автоматически не подгрузится. Чтобы подключить данный фреймворк корректно, нужно использовать функцию wp_enqueue_script(). Поместите следующий код в файле header.php вашей темы (откройте через редактор):

Как подключить библиотеку jQuery в WordPress? В настоящее время почти все CMS используют встроенный jQuery. Его остаётся подключить специальной командой. Не всегда плагины подключают библиотеку автоматически, поэтому некоторые блоки и модули могут не работать. Для подключения следует использовать функцию wp_enqueue_script() .

Ниже приведён код, который нужно прописать в файле header.php (открыть через редактор)

Wp_enqueue_script("jquery");
Данная функция должна быть размещена между тегами head ДО вызова функции wp_head(). Такой порядок сэкономит время загрузки старницы.

Как подключить библиотеку jQuery в Joomla? Код, который надо вставить в обработчик

$document = JFactory::getDocument();
$document->addScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"); // здесь неважно откуда подключение, можно и из сети.
/* или же так */
$document->addScript("http://mysite/js/.js");
В случае с шаблонной версией страницы нужно вставить код PHP