Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью JS и JQuery?".
И вероятно не у всех получилось это сделать. На самом деле все не так сложно как кажется.
В данном уроке я опишу процесс загрузки файла на сервер(хостинг) .
Для обмена данными между браузером и веб-сервером, используется технология ajax.
Версия JQuery используемая в рецепте: 2.2.2.
Создаем примитивную разметку из тегов html, head и body.
В теге head необходимо прописать путь до библиотеки jquery.
В примере я использую jquery с сервера google.
В теге body создаем форму, которая состоит из тега input и button.
С помощью input type="file" осуществляется выбор файла для загрузки.
Тег button необходим для запуска js кода на передачу файла.
Форме задаем name="uploader", enctype="multipart/form-data", method="POST".
Имя формы: name="uploader"
Способ кодирования данных формы: enctype="multipart/form-data"
Метод передачи данных: method="POST"
Отправить этот файл: Загрузить
Весь код html и js разметки:
Отправить этот файл:
Загрузить
Переходим к java script коду.
Для передачи файла необходимо передавать форму целиком:
$("form").submit(function(e) {
Считываем данные формы в переменную:
var formData = new FormData($(this));
Далее для передачи данных на веб-сервер используем технологию ajax.
В случае успешной передачи файла во всплывающем окне будет отображено соответствующее сообщение.
В случае возникновения ошибки или отсутствии файла будет отображено сообщение с текстом возникшей проблемы.
$.ajax({
url: "file.php",
type: "POST",
data: formData,
async: false,
success: function (msg) {
alert(msg);
},
error: function(msg) {
alert("Ошибка!");
},
cache: false,
contentType: false,
processData: false
});
Весь код на java script с использование jquery:
Теперь остался код на стороне сервера для приема данных с формы методом POST запроса.
Получаем корневую директорию сайта и назначаем папку для загрузки файлов:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;
Считываем загружаемый файл:
$uploadfile = $uploaddir . basename($_FILES["userfile"]["name"]);
Проверяем загружен ли файл.
В соответствии с входящими данными назначаем сопровождающее сообщение.
Если файл не загружен, загружаем в директорию указанную в $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) {
$out = "Файл корректен и был успешно загружен.\n";
} else {
$out = "Возможная атака с помощью файловой загрузки!\n";
}
При выполнении указанных действий возвращается ответ.
Весь код на php:
Весь html код включая js:
Отправить этот файл: Загрузить $("form").submit(function(e) { var formData = new FormData($(this)); $.ajax({ url: "file.php", type: "POST", data: formData, async: false, success: function (msg) { alert(msg); }, error: function(msg) { alert("Ошибка!"); }, cache: false, contentType: false, processData: false }); e.preventDefault(); });
Скачать файл с исходным кодом:
Последнее обновление: 1.11.2015
В статье были рассмотрены общие моменты оптравки файлов на сервер в обычном запросе POST. Но если мы используем Ajax-запросы, то загрузка файлов будет иметь свои особенности.
Сначала определим метод в контроллере MVC:
Public JsonResult Upload() { foreach (string file in Request.Files) { var upload = Request.Files; if (upload != null) { // получаем имя файла string fileName = System.IO.Path.GetFileName(upload.FileName); // сохраняем файл в папку Files в проекте upload.SaveAs(Server.MapPath("~/Files/" + fileName)); } } return Json("файл загружен"); }
Здесь предполагается, что у нас в проекте определена папка Files для хранения загруженных файлов. Для получения файлов используется коллекция Request.Files
После сохранения файла пользователю отдается результат в виде строки.
Код представления тогда будет выглядеть следующим образом:
@{
ViewBag.Title = "Home Page";
}
Загрузить
@section scripts{
$("#submit").on("click", function (e) {
e.preventDefault();
var files = document.getElementById("uploadFile").files;
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x]);
}
$.ajax({
type: "POST",
url: "@Url.Action("Upload", "Home")",
contentType: false,
processData: false,
data: data,
success: function (result) {
alert(result);
},
error: function (xhr, status, p3) {
alert(xhr.responseText);
}
});
} else {
alert("Браузер не поддерживает загрузку файлов HTML5!");
}
}
});
}
Нам не нужна стандартная форма, все делается через ajax. Сначала получаем все выбранные файлы:
Var files = document.getElementById("uploadFile").files
Затем формируем объект FormData , в который добавляем все выбранные файлы:
Var data = new FormData(); for (var x = 0; x < files.length; x++) { data.append("file" + x, files[x]); }
И отсылаем их на сервер.
Асинхронная загрузка файлов в WebAPIВ Web API контроллер будет выглядеть следующим образом:
Public class ValuesController: ApiController { public async Task Post() { if (!Request.Content.IsMimeMultipartContent()) { return BadRequest(); } var provider = new MultipartMemoryStreamProvider(); // путь к папке на сервере string root = System.Web.HttpContext.Current.Server.MapPath("~/Files/"); await Request.Content.ReadAsMultipartAsync(provider); foreach (var file in provider.Contents) { var filename = file.Headers.ContentDisposition.FileName.Trim("\""); byte fileArray = await file.ReadAsByteArrayAsync(); using (System.IO.FileStream fs = new System.IO.FileStream(root + filename, System.IO.FileMode.Create)) { await fs.WriteAsync(fileArray, 0, fileArray.Length); } } return Ok("файлы загружены"); } }
Здесь используется асинхронная обработка запроса. Вначале метод IsMultipartContent() проверяет, содержит ли запрос корректные данные. Если нет, то возвращаем статусный код 401.
Для асинхронного чтения с потока создается провайдер:
Var provider = new MultipartMemoryStreamProvider(); Request.Content.ReadAsMultipartAsync(provider);
После считывания потока свойство provider.Contents будет содержать все считанные значения, в том числе и файлы. И в цикле проходим по всем файлам и читаем их в массив байтов:
Byte fileArray = await file.ReadAsByteArrayAsync();
Затем с помощью объекта FileStream считанный массив сохраняется на диске в папке проекта.
Представление будет тем же, что и для MVC, за исключением url запроса:
$.ajax({ type: "POST", url: "api/values/post", contentType: false, processData: false, data: data, success: function (result) { alert(result); }, error: function (xhr, status, p3) { alert(status); } });
Это очень интересная статья, о том, как загрузить файлы на сервер с помощью технологии AJAX. Как вы уже знаете, ajax это асинхронный javascript, который позволяет работать с сервером, не перезагружая страницы в браузере. Такая технология очень полезна для реализации нашей идеи: загрузитьфайлы на сервер не перезагружая страницы браузера. Наша идея также может быть реализована другими способами, обо всем этом читайте ниже в нашей статье.
Что мы сегодня узнаем? Загрузка файлов на сервер на AJAX + jQuery + PHPРеализация загрузки файлов на сервер с помощью AJAX, немного сложнее, чем просто отослать текстовый POST или GET запрос. Но не настолько сложно, чтобы понять и освоить эту методику. Если вы еще не совсем понимаете, как взаимодействуют AJAX и PHP, советую сначала прочитать статью о . Но, даже если вы не знаете, как работает технология AJAX, это не страшно, так как мы будем использовать библиотеку jQuery и плагин ajax_upload . И если вы будете следовать всем примерам и инструкциям шаг за шагом, то вы сможете реализовать отличный загрузчик файлов на сервер.
Суть метода: Мы создадим HTML образ загрузчика, который будет в себе содержать: файловое поле ввода, кнопку подтверждения, блок статуса загрузки (будут выводиться: «загружено» или «ошибка»), список ul (будут добавляться новые DOM элементы, другими словами это список загруженных файлов). На кнопку подтверждения мы создадим обработчик на языке JS, при этом будем использовать синтаксис jQuery, и передадим файл плагину ajax_upload, который отправит файл и все нужные данные на серверную сторону. Серверная сторона, это наше PHP приложение, которое сохранит файл в нужную папку и возвратит результат работы. Или же просто возвратит сообщение об ошибке, если что-то пойдет не так. Задание есть, приступим?
HTML код ajax загрузчика
Давайте создадим HTML файл, в котором будет каркас нашего загрузчика файлов. Приведу HTML код, потом объясню что и к чему.
Upload File
Как видите, HTML код ajax загрузчика, невыносимо сложный. Но все же стоит прояснить, что и к чему:
< div id=" upload" > Upload File - это наша кнопка подтверждения загрузки файла на сервер. Далее приведу CSS код оформления.
< span id=" status" > - это блок, в который мы будем помещать ответ серверной стороны приложения. Или «Загружено», или «Ошибка».
< ul id=" files" > - это список файлов, которые были загружены на сервер, нашим jquery + ajax загрузчиком.
Как и было обещано, приведу ниже CSS код стиля, кнопки подтверждения загрузки файла:
#upload{ margin:30px 200px; padding:15px; font-weight:bold; font-size:1.3em; font-family:Arial, Helvetica, sans-serif; text-align:center; background:#f2f2f2; color:#3366cc; border:1px solid #ccc; width:150px; cursor:pointer !important; -moz-border-radius:5px; -webkit-border-radius:5px; }
Серверная PHP сторона приложения
Как упоминалось в сущности метода, серверная сторона всего лишь выполняет копирование (сохранение) файла и возвращает результат своей работы («Загружено» или «Ошибка»). Но, это только пример, на который полагаться не стоит. Здесь нет защиты от хакерских взломов, и не установлены ограничение на размер файлов. Если у вы будете создавать загрузчик для всеобщего пользования, то обязательно реализуйте вышеперечисленные дополнения. Ниже приведен PHP код примера загрузчика файлов, создайте файл с именем upload- file. php , и поместите в него следующий код:
Если внимательно присмотреться, то заметите что здесь все написано русским текстом, а точнее:
$ uploaddir – каталог на сервере, куда будут загружаться файлы.
$ file – имя загружаемого файла, к которому прикрепляется путь к серверному каталогу.
Самое простое уже сделано. Впереди самое интересное – jQuery + AJAX сторона загрузчика файлов.
JavaScript код
Как и в любом другом приложении, использующем JS, код должен быть помещен в шапку (head), документа. Еще одно важное замечание: перед написанием данного JS кода, не забудьте заранее подключить библиотеку jQuery и плагин ajax_ upload . Если вы уже это сделали, отлично, приступим к написанию кода:
$(function(){
var btnUpload=$("#upload");
var status=$("#status");
new AjaxUpload(btnUpload, {
action: "upload-file.php",
//Имя файлового поля ввода
name: "uploadfile",
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// Валидация расширений файлов
status.text(Только JPG, PNG, GIF файлы");
return false;
}
status.text("Uploading...");
},
onComplete: function(file, response){
//Очищаем текст статуса
status.text("");
//Добавляем загруженные файлы в лист
if(response==="success"){
$("").appendTo("#files").html("
"+file).addClass("success");
} else{
$("").appendTo("#files").text(file).addClass("error");
}
}
});
});
Сначала, мы инициализируем доступ к кнопке подтверждения загрузки, и записываем в переменную btnUpload . Заодно и получаем доступ к блоку серверных сообщений (status ). Далее идет работа с плагином ajax upload . Создаем новый объект и указываем нужные нам параметры:
Action – путь к нашему серверному обработчику загруженных файлов.
Name – это имя поля ввода, с которого мы будем получать загружаемый на сервер файл.
onSubmit – Функции, которые выполняются перед ajax загрузкой файлов на сервер. В нашем случае, это валидация загружаемых файлов (проверка поддерживаемых расширений). Но опять, проверка, как говорится для «недалеких», эту проверку легко обойти, поэтому стоит еще раз проверять на серверной стороне приложения.
status. text – текст, который выводится в процессе ajax загрузки файлов на сервер. Заметьте, если файлы не поддерживаемые, то выводится сообщение об ошибке.
onComplete – Запускаем функцию по завершению загрузки файла на сервер. В этой функции: очищаем значение status.text; добавляем загруженные файлы в лист files .
Как видите загрузить файлы на сервер с помощью AJAX, проще, чем казалось. Но все-таки, меня смущает наличие библиотеки jQuery в данном методе. И если вы знаете, как реализовать ajax загрузку файлов без использования jQuery, убедительная просьба сообщить в комментариях к статье.
Загрузка нескольких файлов на сервер на AJAX, jQuery, PHPЕсли вам, для личных нужд, необходимо сделать красивую загрузку нескольких файлов на сервер с помощью AJAX и PHP, то вам придется использовать некоторые дополнения к библиотеке jQuery. А именно:
jQuery Form Plugin v2.18
Плагин для корректной ajax работы с полями и формами.
Где взять: www.malsup.com/jquery/form/
jQuery BlockUI Plugin v2.14
Плагин, позволяющий выводить красивые сообщения об ошибке.
Где взять: www.malsup.com/jquery/block/
jQuery Multiple File Upload Plugin v1.31
Плагин для библиотеки jQuery, который, позволяет загружать несколько файлов одновременно.
Где взять: www.fyneworks.com/jquery/multiple-file-upload/
Если вы уже скачали все эти плагины, и само собой, библиотеку jQuery, можем приступать к разработке. Также, нам необходимо создать PHP файл, как и в предыдущем примере, который будет обрабатывать данные на серверной стороне. Назовем его: doajaxfileupload.php . Теперь, поподробнее.
jQuery Form Plugin – отличный плагин, он используется для отправки файлов на сервер методом ajax. Этому плагину, можно найти и другие применения.
jQuery BlockUI Plugin – используется в эстетических целях, для вывода красивых сообщений о корректности работы плагина Multiple File Upload Plugin.
Multiple File Upload Plugin – этот плагин, основа нашего мульти файлового загрузчика. Он позволяет выбрать несколько файлов. При этом, он имеет гибкие настройки, для ограничения типа файлов, установки количества загружаемых файлов, проверяет файл на дубликаты (если такой файл уже выбран) и т.д.
Теперь у нас есть все что необходимо, мы можем начать разработку скрипта ajax загрузки нескольких файлов.
В файле index.php, думаю и так все понятно. Здесь находится, собственно форма загрузки файлов и подключаются библиотека jQuery и все необходимые плагины для работы с ajax. Несколько слов по коду и настройке плагинов:
$(".MultiFile").MultiFile({ accept:"jpg|gif|bmp|png|rar", max:15, STRING: { remove:"удалить", selected:"Выбраны: $file", denied:"Неверный тип файла: $ext!", duplicate:"Этот файл уже выбран:\n$file!" }});
Указываете расширения файлов допускаемых к загрузке, указываете максимальное количество загружаемых файлов.
$("#loading").ajaxStart(function(){({ ... });
Показывает и убирает анимацию при ajax загрузке файлов на сервер.
$("#uploadForm").ajaxForm({ ... });
Отвечает за отправку файлов на сервер.
doajaxfileupload.php – это наша серверная сторона приложения, в нем все достаточно понятно, если вам необходимо, можете отредактировать на свой вкус.
Пожалуй, все о загрузке нескольких файлов на сервер методом AJAX, jQuery и PHP. Надеюсь, у вас все работает, также хорошо как у меня.
Загрузка файлов на JS + IFRAME + PHPЕсли вы поклонник не красоты, а функциональности и компактности кода, то для вас есть хорошая новость. Загружать файлы на сервер без перезагрузки страницы, можно не только с помощью AJAX и всяких там jQuery плагинов. Также, это можно реализовать с помощью простого JavaScript, iframe (фреймов) и php (он всегда необходим). Дело в том, что на AJAX, невозможно реализовать загрузку файлов. XmlHttpRequest не способный загружать файлы. Хотя, это можно обойти. С помощью технологии Remote Scripting . В частности используя IFRAME . Интересно то, что мы будем создавать форму как при обычной загрузке файлов, только в форме мы будем указывать target="rFrame" , ссылаться на скрытый iframe, который будет перезагружен, но визуально этого не отобразиться. После перезагрузки, из серверной php стороны приложения, будет возвращен JS вызов функции, который завершит загрузку файла.
Данный загрузчик простой, состоит из двух файлов, и весит около 1 КБ. Ближе к делу. Создайте ваш HTML файл и поместите туда код:
function onResponse(d) { eval("var obj = " + d + ";"); alert("Файл " + obj.filename + (obj.success ? " " : " НЕ ") + "загружен."); }
Здесь мы видим практически те же компоненты, что и при простой загрузке файлов на сервер, только: target=" rFrame" – про который мы уже говорили выше; функция onResponse – она получает JSON объект, который мы присылаем из серверной стороны. Также, не забудьте указать multipart/ form- data , без которого, форма не будет загружать файлы. Далее, посмотрим на серверный код, файла handler.php :
Серверная сторона приложения, аналогична к первому примеру данной статьи, за исключением вывода javascript кода, который будет, выполнятся после перезагрузки iframe, и сообщит нам о результате загрузки файла.
Очень простой и интересный скрипт. Конечно, вы можете усовершенствовать его.
Добрый день!
Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader . «Он ничем не отличается от остальных» - скажите вы, но это не так. Его главное отличие - это простота и хорошая документация с примерами. В документации разобраны все callback"и, описаны все options. Внедрение в любую систему не занимает много времени.
Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.
Пример реализации PHP функции:
public function upload(){
$config["upload_path"] = "/application/uploads/";
$config["allowed_types"] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar";
$config["max_size"] = 2048;
$config["max_width"] = 800;
$config["max_height"] = 600;
$config["encrypt_name"] = TRUE;
$this->load->library("upload", $config);
if ($this->upload->do_upload() == false) {
$error = array("error" => $this->upload->display_errors());
echo json_encode($error);
}else{
$data = $this->upload->data();
echo json_encode($data);
}
}
Внимание! Для того, что бы у Вас работали все allowed_types необходимо дописать недостающие MIME-Types в конфигурационный файл /application/config/mimes.php
У нас готова функция для сохранения файла на сервер. Переходим к клиентской части. Нам понадобится скачать с Github jQuery File Upload . Плагин предоставляет большие возможности, но все их использовать мы не будет, воспользуемся лишь загрузкой нескольких файлов, drug&drop и progressall.
Подключаем на страницу загрузки необходимые JS:
- jquery.fileupload.js
- jquery.fileupload-video.js
- jquery.fileupload-process.js
- jquery.iframe-transport.js
- upload.js //В комплекте не идет - напишем сами
И CSS файл:
- css/jquery.fileupload.css
Добавляем наш INPUT на страницу:
Добавить файл
Осталось совсем не много - написать upload.js, который будет прослушивать событие изменения поля INPUT и вызывать загрузку выбранного файла. «А где же обещанный Drug&Drop?» - спросите Вы. Drug&Drop уже работает благодаря jQuery File Upload. Вместо вызова стандартного диалога выбора файла вы можете перетащить сразу несколько файлов на страницу и они в порядке очереди загрузятся на сервер.
И на последок Upload.js
$(document).ready(function(){
$("#fileupload").fileupload({
dataType: "json",
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$(".progress .bar").css("width", progress + "%"); },
done: function (e, data) {
if(data.result.error != undefined){
$("#error").html(data.result.error); // выводим на страницу сообщение об ошибке если оно есть
$("#error").fadeIn("slow");
}else{
$("#error").hide(); //на случай если сообщение об ошибке уже отображалось
$("#files").append("");
$("#success").fadeIn("slow");
}
}
}
});
});
Data - это наш ответ от сервера, но он не является массивом с информацией о загруженном файле. Вся информация в формате JSON хранится в Data.Result. Кстати говоря console.log(data) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.
Вот собственно и все, надеюсь на полезность материала.
Мы пробежались по нескольким основным методам для получения данных и их дальнейшей передаче AJAX-запросом. Теперь пришло время поговорить о том, как же можно загружать файлы с помощью AJAX . Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс. Но оглядываться назад не будем, посему шагаем в ногу со временем.
Рассмотрим, на мой взгляд, один из самых удобных способов для работы с файлами (и не только) - объект FormData . Пусть будет такая простенькая форма, для загрузки аватара пользователя:
HTML (файл index.html )
Ф.И.О:
Аватар:
Перейдем к JS-части. С полем "Ф.И.О" сложностей не будет и его используем только для наглядности того, что вместе с файлом, мы можем отправлять любые другие данные.
jQuery (файл script.js )
$(function(){ $("#my_form").on("submit", function(e){ e.preventDefault(); var $that = $(this), formData = new FormData($that.get(0)); // создаем новый экземпляр объекта и передаем ему нашу форму (*) $.ajax({ url: $that.attr("action"), type: $that.attr("method"), contentType: false, // важно - убираем форматирование данных по умолчанию processData: false, // важно - убираем преобразование строк по умолчанию data: formData, dataType: "json", success: function(json){ if(json){ $that.replaceWith(json); } } }); }); });
(*)Обратите внимание на то, что передаем форму не объектом jQuery, а DOM-элемент
PHP-обработчик (файл handler.php )
