Как реализовать асинхронную загрузку файлов с помощью JavaScript и PHP

Владимир | | CodeIgniter, HTML, 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 формы указан name фрейма.

На этом этапе если нажать кнопку «Загрузить» файл будет отправлен серверу, а результат – загружен в 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
$attr = array('target' => 'hiddenframe', 'onsubmit' => 'hideBtn()');
echo form_open_multipart('asyncuploader/do_upload', $attr);
?>
<p>
<input type="file" id="userfile" name="userfile" />
</p>
<div id="sendBtn">
<input type="submit" value="Загрузить" />
</div>
<?php
echo form_close();
?>
<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())
	{
		$mes = array('error' => $this->upload->display_errors());
	}
	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 и загружать файлы асинхронно (ну, во всяком случае, с точки зрения посетителя) 🙂 .

До встречи!

  • Спасибо! Интересный материал. А главное, я заметил, что вы выкладываете обзоры именно того и тогда, в чем есть первостепенная потребность ))

  • Спасибо! Интересный материал. А главное, я заметил, что вы выкладываете обзоры именно того и тогда, в чем есть первостепенная потребность ))

  • Tazman

    Спасибо за статью! Очень помогло. Интересный метод. Надо только добавить немного эффектов и prototype/mootools для красоты 🙂 P.S. Вообще есть еще вариант с использованием флэша.

    • Флеш требует flash player, а это — минус. Правда, небольшой, т.к. он практически у всех установлен.

      Кроме того, можно использовать Java applet и компоненты ActiveX, но первый вариант требует JRE (java runtime enviroment), который меньше распространен чем тотже флеш, а второй — вообще должен быть отключен в браузере с точки зрения безопасности.

    • а почему не script.aculo.us? 🙂

      • Тогда уже jquery 🙂

  • Tazman

    Спасибо за статью! Очень помогло. Интересный метод. Надо только добавить немного эффектов и 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. Естественно, нужно установить права на запись в эту папку.

      Типы перечисляются через символ «|». Загружаться будут только файлы тех типов, которые указаны в списке.

  • Или я что то не понял или не так сделал, в каких файлах, в каких директориях что должно быть помещено(какие имена и расширения)?

    • Загрузку файлов выполняет функция 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 получилосьбы стройнее, но увы.

  • А как быть если надо аплоадить файл на другой сервак, то есть хост другой. Есть какой нибудь рецепт этого?

    • уточню вопрос….
      проблема сидит в том, то так как во фрейме документ с другого хоста, то получаем:

      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 получилосьбы стройнее, но увы.

  • Максим

    Замечательная статья! Скажите, а есть ли возможность организовать с помощью JavaScript загрузку файла с сервера на машину пользователя в обход вызова стандартных менеджеров загрузок IE/Firefox?

    • Понимаете, JavaScript тут вобщем-то не при чем.
      Правила обработки файлов задаются в настройках браузера. Для Firefox они находятся здесь: Инструменты -> Настройки… -> вкладка Приложения.

      Естественно вы можете обмануть браузер, если укажите неправильный заголовок. Например, при загрузке архива в заголовке Content-Type вместо application/x-gzip отправите text/html. В этом случае содержимое архива появится на странице браузера (кракозябры) и стандартный загрузчик вызван не будет.

      А что касается сохранения файлов, то тут все просто. Скрипты не могут работать с файловой системой компьютера. Иначе любой хакер смог бы легко постирать ваши документы. Т.е. чтобы сохранить файл нужно подтверждение от пользователя.

  • Максим

    Замечательная статья! Скажите, а есть ли возможность организовать с помощью JavaScript загрузку файла с сервера на машину пользователя в обход вызова стандартных менеджеров загрузок IE/Firefox?

    • Понимаете, JavaScript тут вобщем-то не при чем.
      Правила обработки файлов задаются в настройках браузера. Для Firefox они находятся здесь: Инструменты -> Настройки… -> вкладка Приложения.

      Естественно вы можете обмануть браузер, если укажите неправильный заголовок. Например, при загрузке архива в заголовке Content-Type вместо application/x-gzip отправите text/html. В этом случае содержимое архива появится на странице браузера (кракозябры) и стандартный загрузчик вызван не будет.

      А что касается сохранения файлов, то тут все просто. Скрипты не могут работать с файловой системой компьютера. Иначе любой хакер смог бы легко постирать ваши документы. Т.е. чтобы сохранить файл нужно подтверждение от пользователя.

  • Максим

    1. Я не говорю, что необходима загрузка без подтверждения от пользователя, более того — он должен указать место сохранения файла.. Вопрос в том — можно ли реализовать свой «менеджер загрузок» не устанавливаемый на компьютер пользователя, а просто кэшируемый? 2. а «кракозябры» можно не отображать, хотя и загрузить в браузер, верно?
    Максим

    • 1.

      cвой «менеджер загрузок»

      Интересный вопрос. Готовых решений я не видел. Обычно свой загрузчик делают в виде плагина к браузеру.

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

      Ну и можно с помощью JavaScript открыть диалог сохранения файла, т.е. запустить стандартный загрузчик.

      2. Да, конечно.

  • Максим

    1. Я не говорю, что необходима загрузка без подтверждения от пользователя, более того — он должен указать место сохранения файла.. Вопрос в том — можно ли реализовать свой «менеджер загрузок» не устанавливаемый на компьютер пользователя, а просто кэшируемый? 2. а «кракозябры» можно не отображать, хотя и загрузить в браузер, верно?
    Максим

    • 1.

      cвой «менеджер загрузок»

      Интересный вопрос. Готовых решений я не видел. Обычно свой загрузчик делают в виде плагина к браузеру.

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

      Ну и можно с помощью JavaScript открыть диалог сохранения файла, т.е. запустить стандартный загрузчик.

      2. Да, конечно.

  • Pingback: Обзор №4, Февраль 2008 - Design For Masters()

  • Владимир

    СПА-СИ-БО!!!
    И кто бы мог подумать, что это так просто?! Ведь мануалы вот они все. Просто нужно составить мозаику. 🙂

  • Владимир

    СПА-СИ-БО!!!
    И кто бы мог подумать, что это так просто?! Ведь мануалы вот они все. Просто нужно составить мозаику. 🙂

  • Я вот специально искал асинхронную передачу файлов, находил много способов. Но знаете бывает на сайтах встречаеться загрузка с прогресс баром…

    как такую организовать?

    • Есть несколько способов. Самый простой — использование flash (конкретных решений советовать не буду, т.к. сам ими практически не пользовался, поищите в google «flash uploader», уверен вы легко подберете что-нибудь). Другие варианты требуют установки дополнительных расширений на сервере.

  • Я вот специально искал асинхронную передачу файлов, находил много способов. Но знаете бывает на сайтах встречаеться загрузка с прогресс баром…

    как такую организовать?

    • Есть несколько способов. Самый простой — использование flash (конкретных решений советовать не буду, т.к. сам ими практически не пользовался, поищите в google «flash uploader», уверен вы легко подберете что-нибудь). Другие варианты требуют установки дополнительных расширений на сервере.

  • Сергей

    Владимир, доброго времени суток.
    Отличная и подробная статья, спасибо большое.
    У меня возникла проблема. Если формат файла не проходит по фильтру, «$config['allowed_types'] = 'jpg|rar';», то все хорошо, под формой возникает ошибка. Но если все удовлетворяет условиям, под формой возникает надпись «Подождите, идет загрузка…» и все, работа на этом останавливается. 🙁 Все делал как написано здесь.
    В чем может быть дело? Буду благодарен за посильную помощь.
    Спасибо.

  • Сергей

    Владимир, доброго времени суток.
    Отличная и подробная статья, спасибо большое.
    У меня возникла проблема. Если формат файла не проходит по фильтру, «$config['allowed_types'] = 'jpg|rar';», то все хорошо, под формой возникает ошибка. Но если все удовлетворяет условиям, под формой возникает надпись «Подождите, идет загрузка…» и все, работа на этом останавливается. 🙁 Все делал как написано здесь.
    В чем может быть дело? Буду благодарен за посильную помощь.
    Спасибо.

  • Сергей

    забыл добавить. Файлы в директорию закачиваются, все хорошо. Не выводится лишь уведомление о закачке «resElement.innerHTML = «Файл » + mes.file_name + » загружен»;»

    • Похоже не выполняется js код, который приходит в ответ от сервера (предпоследний листинг, строки 17-24). Причины могут быть разные, например, не правильно расставленные кавычки.

      Лучше всего посмотреть firebug'ом что приходит в ответ от сервера.

      Или ошибка в функции handleResponse. Но тогда тотже firebug должен выдавать ошибки.

  • Сергей

    забыл добавить. Файлы в директорию закачиваются, все хорошо. Не выводится лишь уведомление о закачке «resElement.innerHTML = «Файл » + mes.file_name + » загружен»;»

    • Похоже не выполняется js код, который приходит в ответ от сервера (предпоследний листинг, строки 17-24). Причины могут быть разные, например, не правильно расставленные кавычки.

      Лучше всего посмотреть firebug'ом что приходит в ответ от сервера.

      Или ошибка в функции handleResponse. Но тогда тотже firebug должен выдавать ошибки.

  • Спасибо за статью! Хорошо описано, но многое непонятно, можно попросить автора выслать архив с рабочей версией программы на электронный ящик? Заранее благодарен!

    • Можно, отправил 🙂

      • Спасибо большое! Сейчас буду разбираться

    • Westpark

      А можете мне на мыло кінуть рабочую версію?) спасібо!
      westpark@mail.ru

      • Нет, к сожалению, найти тестовый скрипт, который я написал 3 года назад, не получилось 🙂
        Но код в статье 100% рабочий. Я его копировал из исходников.

  • Спасибо за статью! Хорошо описано, но многое непонятно, можно попросить автора выслать архив с рабочей версией программы на электронный ящик? Заранее благодарен!

    • Можно, отправил 🙂

      • Спасибо большое! Сейчас буду разбираться

  • В первый раз, когда здесь был, ничего не писал, но сейчас хочу сказать большое спасибо вам за статью! Самым понятным языком изложено, четко и стройно! У меня почти сразу все получилось загружать так, как надо.

  • В первый раз, когда здесь был, ничего не писал, но сейчас хочу сказать большое спасибо вам за статью! Самым понятным языком изложено, четко и стройно! У меня почти сразу все получилось загружать так, как надо.

  • Тен

    А где upload.php?

    • Его нет 🙂
      Просто в начале статьи я объяснял общий принцип, а потом показал реализацию с использованием фреймворка CI. Поэтому файлу index.php соответствует файл контроллера application/controllers/asyncuploader.php, а файлу index.html — представление application/views/main.php.

  • Тен

    А где upload.php?

    • Его нет 🙂
      Просто в начале статьи я объяснял общий принцип, а потом показал реализацию с использованием фреймворка CI. Поэтому файлу index.php соответствует файл контроллера application/controllers/asyncuploader.php, а файлу index.html — представление application/views/main.php.

  • А зачем делать только загрузку картинки в фрейме

  • А зачем делать только загрузку картинки в фрейме

  • А зачем только загрузку картинки в фрейм?

    • В смысле? Загрузить таким способом можно любой файл, не обязательно только картинку.

  • А зачем только загрузку картинки в фрейм?

    • В смысле? Загрузить таким способом можно любой файл, не обязательно только картинку.

  • Pingback: Особое программирование » Post Topic » Загрузка файлов с помощью SWFUpload и PHP()

  • RX200

    Спасибо))

  • RX200

    Спасибо))

  • Killersxxx

    А можно по подробнее куда и с каким кодом файлы создавать?)) у меня не чего не получилось))

    • Файлов здесь действительно довольно много, т.к. пример написан под использование с фреймворком CodeIgniter.
      Я очень советую вам почитать об этом фреймворке. Можно в этом блоге, можно официальную документацию (кстати, она одна из лучших).
      Если сделаете одно, даже самое простенькое приложение, многие вопросы отпадут 😉

  • Killersxxx

    А можно по подробнее куда и с каким кодом файлы создавать?)) у меня не чего не получилось))

  • K-yas

    ЗдОрово!

    Как к спецу по браузерным скрипам вопрос: можно ли из жабаскрипта получить содержимое файла, отправляемого пользователем через форму?

    (уточню)
    Я не прошу доступа к файловой системе п-ля, этого, ясно дело, мне никто в скрипте не даст. Я хочу получить то содержимое, которое браузер отправляет на сервер, когда п-ль выбрал файл и нажал submit.

    • По-моему, нет.
      После того, как пользователь нажимает submit у вас есть возможность выполнить js код и, например, заблокировать отправку запроса. Но этот код доступа к файлу не получит. Запрос будет отправлен после выполнения вашего js кода.

  • Igorjoha

    >Обратите внимание, что в атрибуте target формы указан id фрейма.Прошу пощения, но тут ошибка. Атрибут target в форме ссылается не на id, а на name фрейма.

  • Pf

    проблема при загрузке картинок разных форматов. пишет Подождите, идет загрузка…, сам файл загружен уже, в firebug показывает ошибку  missing ; before statement

    • Поищите где вы пропустили точку с запятой (firebug пишет номер строки в которой возникла ошибка, проверять нужно это строку и, возможно, предыдущую).

      • Pf

        разобрался). Спасибо за статью. Ошибка была в кавычках которые обрамляют $item, исправил на одинарные и все заработало.

  • Igor

    если не ошибаюсь то многие веб щиты ловят хайдные фреймы…

    • Утверждать не буду, но, по-моему, есть разница между iframe содержимое которого загружено с другого домена и iframe с оригинального домена.

  • pltvs

    Спасибо. Я тоже писал про асинхронность JS: http://plutov.by/post/javascript_memory