Как реализовать асинхронную загрузку файлов с помощью JavaScript и PHP
В комментариях к одной из предыдущих статей меня попросили показать пример загрузки файлов на север с помощью технологии AJAX и фреймворка CodeIgniter.
Тогда я ответил, что это несложно и пообещал показать пример. Но, я поторопился и забыл упомянуть о паре «нюансов», связанных с этой операцией 
. Так что, исправляю ошибку.
Механизм отправки
Прежде всего, нужно четко понимать, что отправить (загрузить) на сервер файл с помощью AJAX нельзя.
Тем не менее, можно организовать процесс загрузки так, что с точки зрения посетителя загрузка будет выглядеть асинхронной. Т.е. посетитель укажет имя файла и нажмет кнопку «Загрузить». После этого, увидит умную надпись вроде «Подождите, идет загрузка…» или какую-нибудь анимацию. А после окончания загрузки – сообщение с результатами. Страница, которую он видит, перезагружена не будет.
Но при этом отправка файла будет выполнена обычным способом.
Идея заключается в использовании невидимого фрейма (iframe), атрибута формы target и JavaScript.
Работает это так. Создаем страницу с формой и скрытым фреймом (index.html).
-
<form action="http://www.mysite.com/upload.php" method="post" target="hiddenframe" enctype="multipart/form-data">
-
<input type="file" id="userfile" name="userfile" />
-
<input type="submit" value="Загрузить" />
-
</form>
-
<div id="res"></div>
-
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>
Обратите внимание, что в атрибуте target формы указан id фрейма.
На этом этапе если нажать кнопку «Загрузить» файл будет отправлен серверу, а результат – загружен в iframe, т.е. с точки зрения посетителя никаких изменений не произойдет, т.к. фрейм невидимый.
Примечание. Как вы знаете, в iframe может быть вставлена любая html страница или результат запроса.
Теперь нужно передать данные из фрейма на основную страницу.
Мы заранее не знаем, когда придет ответ сервера, поэтому логично, что он и должен обновлять основную страницу.
Для этого в ответ сервера необходимо вставить JavaScript код, который будет выполнен после окончания загрузки.
Обычно этот код просто вызывает js-функцию, объявленную в основной странице и передает ей результаты выполнения запроса.
Схематически асинхронная отправка файла изображена на диаграмме.
Примечание. Описанная техника называется Remote Scripting. Подробнее о ней можно почитать в этой статье.
Теперь посмотрим, как это работает на практике.
Как я и обещал, в примере будет использоваться фреймворк CodeIgniter.
Прежде всего, создаем контроллер (application/controllers/asyncuploader.php), с двумя методами.
-
class AsyncUploader extends Controller {
-
function AsyncUploader() {
-
parent::Controller();
-
$this->load->helper(‘url’);
-
$this->load->helper(‘form’);
-
}
-
function index() {
-
$pageData[‘title’] = "Асинхронная загрузка файлов";
-
$this->load->view(‘main’, $pageData);
-
}
-
function do_upload() {
-
//…
-
}
-
}
index() – отображает основную страницу с формой;
do_upload() – получает запрос с файлами и возвращает результат (ниже мы рассмотрим его подробно).
После этого создаем представление (application/views/main.php).
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
-
<head>
-
<title><?php echo $title; ?></title>
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
<script src="<?php echo base_url()."scripts.js" ?>" type="text/javascript"></script>
-
</head>
-
<body>
-
<?php
-
?>
-
<p>
-
<input type="file" id="userfile" name="userfile" />
-
</p>
-
<div id="sendBtn">
-
<input type="submit" value="Загрузить" />
-
</div>
-
<?php
-
?>
-
<div id="res"></div>
-
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>
-
</body>
-
</html>
Тут все достаточно просто. Мы создали форму (строки 10-20) с полем file и кнопкой «Загрузить».
После формы расположены пустой блок «res», в который будет вставлен ответ сервера и невидимый iframe (строка 23).
При отправке данных формы будет вызвана функция hideBtn(), размещенная в файле scripts.js. Этот файл загружается в заголовке страницы (строка 6).
Рассмотрим его подробнее.
-
function hideBtn() {
-
document.getElementById("sendBtn").innerHTML = "Подождите, идет загрузка…";
-
}
-
-
function handleResponse(mes) {
-
var resElement = document.getElementById("res");
-
document.getElementById("sendBtn").innerHTML =
-
"<input type=\"submit\" value=\"Загрузить\" />";
-
if (mes.error != null) {
-
resElement.innerHTML = "Возникли ошибки во время загрузки файла: " + mes.error;
-
}
-
else {
-
resElement.innerHTML = "Файл " + mes.file_name + " загружен";
-
}
-
}
Здесь объявлены две функции:
hideBtn() – прячет кнопку «Загрузить» и показывает вместо нее сообщение;
handleResponse() – эта функция отображает результаты загрузки на странице. Она вызывается из iframe. А в качестве параметра получает объект с сообщениями сервера.
Теперь переходим к методу do_upload().
Он принимает данные формы, проверяет и сохраняет файл и возвращает результат.
-
function do_upload() {
-
$config[‘upload_path’] = ‘./uploads/’;
-
$config[‘allowed_types’] = ‘zip|rar’;
-
$config[‘max_size’] = ‘500′;
-
-
$this->load->library(‘upload’, $config);
-
-
if ( ! $this->upload->do_upload())
-
{
-
}
-
else
-
{
-
$mes = $this->upload->data();
-
}
-
//создаем js массив
-
$res = "<script type=\"text/javascript\">";
-
$res .= "var data = new Object;";
-
foreach ($mes as $key => $item) {
-
$res .= "data.".$key." = \"".$item."\";";
-
}
-
$res .= "window.parent.handleResponse(data);";
-
$res .= "</script>";
-
echo $res;
-
}
Для загрузки файла используется библиотека upload, входящая в состав CodeIgniter.
Пользоваться ей несложно. Достаточно создать массив с настройками и загрузить библиотеку (строки 2-6). В настройках можно задать размещение загружаемых файлов, их допустимый тип, размер и т.п.
Примечание. Подробнее почитать о работе с библиотекой можно в официальном руководстве в разделе File Uploading Class.
После того, как настройки заданы, вызываем метод do_upload() (строка 8).
Дальше начинается более интересная часть. Мы должны сформировать ответ сервера с JavaScript кодом, который вызовет функцию handleResponse() основной страницы и передаст ей результаты загрузки.
Прежде всего, обратите внимание, что в зависимости от результатов выполнения у нас будет массив, содержащий либо описание ошибки, либо данные загруженного файла (строка 14).
Теперь посмотрите на строки 17-23. Мы создаем текстовую строку, содержащую обычный JavaScript код. Когда ответ сервера будет загружет во фрейм, код будет автоматически выполнен.
Разберем его подробнее.
Нам нужно передать результаты обработки, которые находятся в массиве $mes (php). Т.к. количество полей может меняться, то удобно использовать объект JavaScript, названия свойств которого будут совпадать с ключами массива.
Для этого мы используем цикл (php), каждая итерация которого создает строку вида:
-
data.имя_ключа = "значение";
После этого, мы вызываем функцию handleResponse (строка 22), которой передаем сформированный js-объект.
Таким образом, функция handleResponse в параметре получит объект со всеми необходимыми данными, доступ которым можно получить через его свойства, что мы и делаем (листинг функции приведен ранее).
Как видите, используя несложные обходные пути можно обойти ограничения AJAX и загружать файлы асинхронно (ну, во всяком случае, с точки зрения посетителя) .
До встречи!
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Опубликовано в CodeIgniter, HTML, JavaScript, PHP
Комментарии (21)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Оставить комментарий
Спасибо! Интересный материал. А главное, я заметил, что вы выкладываете обзоры именно того и тогда, в чем есть первостепенная потребность ))
Стараемся
Спасибо за статью! Очень помогло. Интересный метод. Надо только добавить немного эффектов и prototype/mootools для красоты
P.S. Вообще есть еще вариант с использованием флэша.
Флеш требует flash player, а это - минус. Правда, небольшой, т.к. он практически у всех установлен.
Кроме того, можно использовать Java applet и компоненты ActiveX, но первый вариант требует JRE (java runtime enviroment), который меньше распространен чем тотже флеш, а второй - вообще должен быть отключен в браузере с точки зрения безопасности.
а почему не script.aculo.us?
Тогда уже jquery
Спасибо за статью.
Весьма наглядно и понятно.
На самом деле флеш далеко не везде установлен, так что вариант с ифрейм определённо решает - санкс за статью
Действительно, может быть дома у большинства флеш и установлен, но на работе в больших компаниях по политике безопасности его ставят крайне редко и неохотно.
На вопрос “почему” не отвечу. Сам не знаю. Но факт остается фактом.
Или я что то не понял или не так сделал, в каких файлах, в каких директориях что должно быть помещено(какие имена и расширения)?
Загрузку файлов выполняет функция do_upload() (в предпоследнем листинге).
Размещение и типы файлов указываются в массиве $config (‘upload_path’ и ‘allowed_types’).
Причем, размещение должно быть указано относительно корня сайта (т.е. папки в которой находится index.php, если вы используете CodeIgniter).
В данном случае это папка uploads. Естественно, нужно установить права на запись в эту папку.
Типы перечисляются через символ “|”. Загружаться будут только файлы тех типов, которые указаны в списке.
А как быть если надо аплоадить файл на другой сервак, то есть хост другой. Есть какой нибудь рецепт этого?
уточню вопрос….
проблема сидит в том, то так как во фрейме документ с другого хоста, то получаем:
OPERA: message: Security error: attempted to read protected variable
FF: Ошибка: uncaught exception: Permission denied to get property HTMLDocument.getElementById
IE: Отказано в доступе
если сделать то же самое из родителького окна, то есть по тамауту запрашивать содержимое, пока оно не загрузится, то тот же самый результат
Нет, отправить файл на другой сервер не получится. Из-за системы безопасности браузеров (исходящие соединения к другим серверам по-умолчанию запрещены).
В принципе, эти настройки может изменить пользователь, но вряд ли станет это делать.
Варианты решения:
1) загружать файл на сервер, с которого был загружен скрипт, а с него отправлять на другой сервер.
2) отправить браузеру редирект на сервер, который должен принимать файл.
Может есть и другие варианты.
вот так обходят запреты
назыается JSON with Padding (JSONP)
исочник
Честно говоря не понял… старался
есть x
есть
и как заставить чтобы из iframe изменилось содержимое dest? Какой нить пример если можно
Честно говоря не понял… старался
есть [div id=”dest”]x[/div]
есть
[iframe id=”otherserver” src=”otherserver”]
[script type=”text/javascript” src=”http://travel.com/findItinerary?username=a&reservationNum=b&output=json&callback=showItinerary”/]
[/iframe]
и как заставить чтобы из iframe изменилось содержимое dest? Какой нить пример если можно
Я хочу уточнить. JSON with Padding предполагает отправку (получение) данных с помощью JSON.
А проблема как раз в том, что с помощью JSON файл отправить нельзя.
Отправка осуществляется из обычной формы (form/multipart) и ответ приходит обычный, только попадает он не на основную страницу, а в iframe.
JavaScript тут используется только для передачи ответа сервера из невидимого iframe в основную страницу.
А вот вариант ajax-прокси (наверное, в данном случае это будет просто прокси), должен работать.
В простейшем варианте нужно в серверном скрипте не сохранять файл, а отправить его на другой сервер.
Правда вариант не очень хороший, возникнет перерасход трафика, да и нагрузка на основной сервер возрастет…
В общем, вопрос такой: “Почему вы не можете страницу с формой загрузки разместить на том же сервере, на который будете закачивать файлы?”
P.S. Алексею спасибо за ссылку на статью. Очень интересная!
Да, статья интересная
Просто не хочется разносить шаблоны по доменам… причем штука которая аплоадит это плагин к tinyMCE. В итоге отказался от ajax в данной форме и просто в action указал другой домен, после чего тот сервер редиректит обратно.
Конечно с ajax получилосьбы стройнее, но увы.