AJAX загрузка файлов на сервер с помощью jQuery. Установка jQuery Jquery скачать 2.2 3 и установка

В этой заметке вы узнаете, как реализовать 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: