Вредоносное ПО (malware) - это назойливые или опасные программы,...
Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.
В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое - что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress , то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).
Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.
Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.
Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели...
AJAX Загрузка файлов: общий примерНачинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега ).
Таким образом, у нас есть HTML код с file полем и кнопкой «Загрузить файлы».
Загрузить файлы
Шаг 1. Данные из поля fileПервым шагом, нужно получить данные загружаемых файлов.
При клике на file-поле, появляется окно выбора файлов, после выбора, данные о них сохраняются в input поле, а нам нужно их от туда «забрать». Для этого повесим на событие change JS функцию, которая будет сохранять имеющиеся данные file-поля в JS переменную files:
Var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; });
Шаг 2. Создаем AJAX запрос (по клику)Данные файлов у нас есть, теперь их нужно отправить через AJAX. Вешаем это событие на клик по кнопке «Загрузить файлы».
В момент клика создаем новый объект new formData() и добавляем в него данные из переменной files . С помощью formData() мы добьемся того, что отправляемые данные будут выглядеть, как если бы мы просто сабмитили форму в браузере.
Чтобы такой запрос состоялся, в jQuery нужно указать дополнительные AJAX параметры, поэтому привычная функция $.post() не подходит и мы используем более гибкий аналог: $.ajax() .
Два важных дополнительных параметра нужно установить в false:
ProcessData
Отключает обработку передаваемых данных. По умолчанию, например, для GET запросов jQuery собирает данные в строку запроса и добавляет эту строку в конец URL. Для POST данных делает другие преобразования. Нам любые изменения исходных данных будут мешать, поэтому отключаем эту опцию...
contentType
Отключает установку заголовка типа запроса. Дефолтная установка jQuery равна "application/x-www-form-urlencoded . Такой заголовок не предусматривает отправку файлов. Если установить этот параметр в "multipart/form-data" , PHP все равно не сможет распознать передаваемые данные и выведет предупреждение «Missing boundary in multipart/form-data»... В общем, проще всего отключить эту опция, тогда все работает!
// обработка и отправка AJAX запроса при клике на кнопку upload_files
$(".upload_files").on("click", function(event){
event.stopPropagation(); // остановка всех текущих JS событий
event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега
// ничего не делаем если files пустой
if(typeof files == "undefined") return;
// создадим объект данных формы
var data = new FormData();
// заполняем объект данных файлами в подходящем для отправки формате
$.each(files, function(key, value){
data.append(key, value);
});
// добавим переменную для идентификации запроса
data.append("my_file_upload", 1);
// AJAX запрос
$.ajax({
url: "./submit.php",
type: "POST", // важно!
data: data,
cache: false,
dataType: "json",
// отключаем обработку передаваемых данных, пусть передаются как есть
processData: false,
// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
contentType: false,
// функция успешного ответа сервера
success: function(respond, status, jqXHR){
// ОК - файлы загружены
if(typeof respond.error === "undefined"){
// выведем пути загруженных файлов в блок ".ajax-reply"
var files_path = respond.files;
var html = "";
$.each(files_path, function(key, val){
html += val +"
";
})
$(".ajax-reply").html(html);
}
// ошибка
else {
console.log("ОШИБКА: " + respond.error);
}
},
// функция ошибки ответа сервера
error: function(jqXHR, status, errorThrown){
console.log("ОШИБКА AJAX запроса: " + status, jqXHR);
}
});
});
Теперь последний шаг: нужно обработать отправленный запрос.
Чтобы было наглядно обработаем запрос без дополнительных проверок для файлов, т.е. просто сохраним полученные файлы в нужную папку. Хотя, для безопасности, отправляемые файлы обязательно нужно проверять, хотя бы расширение (тип) файла...
Создадим файл submit.php с таким кодом (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):
jQuery(document).ready(function($){
// ссылка на файл AJAX обработчик
var ajaxurl = "";
var nonce = "";
var files; // переменная. будет содержать данные файлов
// заполняем переменную данными, при изменении значения поля file
$("input").on("change", function(){
files = this.files;
});
// обработка и отправка AJAX запроса при клике на кнопку upload_files
$(".upload_files").on("click", function(event){
event.stopPropagation(); // остановка всех текущих JS событий
event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега
// ничего не делаем если files пустой
if(typeof files == "undefined") return;
// создадим данные файлов в подходящем для отправки формате
var data = new FormData();
$.each(files, function(key, value){
data.append(key, value);
});
// добавим переменную идентификатор запроса
data.append("action", "ajax_fileload");
data.append("nonce", nonce);
data.append("post_id", $("body").attr("class").match(/postid-(+)/));
var $reply = $(".ajax-reply");
// AJAX запрос
$reply.text("Загружаю...");
$.ajax({
url: ajaxurl,
type: "POST",
data: data,
cache: false,
dataType: "json",
// отключаем обработку передаваемых данных, пусть передаются как есть
processData: false,
// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
contentType: false,
// функция успешного ответа сервера
success: function(respond, status, jqXHR){
// ОК
if(respond.success){
$.each(respond.data, function(key, val){
$reply.append("");
});
}
// error
else {
$reply.text("ОШИБКА: " + respond.error);
}
},
// функция ошибки ответа сервера
error: function(jqXHR, status, errorThrown){
$reply.text("ОШИБКА AJAX запроса: " + status);
}
});
});
})