Заявка на участие в семинаре

Все поля обязательные для заполнения
Как к Вам обращаться
Email
Телефон
Семинар
Комментарий
отправить
закрыть

Загрузка файлов на сервер без "перезагрузки" страницы

Уральская академия современных информационных технологий Загрузка файлов на сервер без "перезагрузки" страницы
Дата публикации: 19.01.2015 13:28:27
Автор статьи: Андрейчиков Юрий, программист отдела разработки УрАИТ


Добрый день. Сегодня я расскажу о том, как мы делали модуль "мои файлы" для проекта doit0.ru

На курсах мы рассказываем, что файлы загружаются на сервер по протоколу POST, причем происходит перезагрузка страницы после отправки формы (у формы есть атрибут action, если он не заполнен форма будет отправлена на адрес текущей страницы).

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

Как мы с вами у же знаем, при помощи ajax мы можем пересылать данные на север и получать их без перезагрузки страницы, но... любые ли данные? Это зависит от браузера! Вообще все дело в API XMLHttpRequest, в современных браузерах поддерживается возможность пересылки файлов, но в старых браузерах такой возможности нет.

Какие есть варианты? Можно использовать flash. Но мы решили не делать этого. Только php, JavaScript. Поэтому мы обратились к старому проверенному способу, который работает во всех браузерах без особых нареканий - фрейм (frame).

Как мы рассказываем на курсе веб-дизайна, в свое время фреймы довольно часто использовались для создания сайтов и веб-приложений, к примеру, phpMyAdmin до сих пор использует фреймы..

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

Например так:

<form action="upload.php" id="form" target="upload" method="POST" enctype="multipart/form-data">
   <input id="files" type="file" name="files[]" multiple >
</form>

,и где-то вне формы разместим frame:

<iframe id="upload" name="upload" style="display: none"></iframe>

И так, по порядку:

  1. У формы атрибут action показывает на тот файл в котором будет производиться обработка загружаемых файлов, т.е. работа с массивом $_FILES
  2. Атрибут target указывает на frame!
  3. input для выбора имени файла имеет параметр multiple, это позволяет выбирать не один файл, а сразу много, при этом параметр name будет выглядеть как [имя][].

Таким образом, по сути страница перезагружается, но только во фрейме. Что нам и надо.

В файле upload.php можно разместить такой код:

if(count($_FILES["files_1"])>0){
   foreach ($_FILES["files_1"]["tmp_name"] as $key => $error){
      if($error == UPLOAD_ERR_OK and $_FILES["files_1"]["tmp_name"][$key]!='') {
         $tmp_name = $_FILES["files_1"]["tmp_name"][$key];//временное имя файла
         $name = $_FILES["files_1"]["name"][$key];
         $mtime = time(); 
         $type_t = pathinfo($name);
         $type = $type_t['extension'];
         $name_file = $mtime.$key.'.'.$type; //новое имя файла
         move_uploaded_file($tmp_name, $_SERVER['DOCUMENT_ROOT'].'/files/'.$name_file); //перемещаем файл
      }
   }
}

После загрузки файлов генерируем и выводим при помощи echo JavaScript код window.parent.function(), где function() - акая то функция, которая например, при помощи ajax формирует новый список файлов для отображения на основной странице.

Итак, получается что мы из формы передали данные во фрейм, на сервере обработали данные отдали ответ, который как раз и пришел во фрейм (ведь он то перезагрузился в отличии от остальной части старницы) и получили результат, просто и надежно.

Ссылки по теме:

  1. XMLHttpRequest http://ru.wikipedia.org/wiki/XMLHttpRequest
  2. Новые возможности XMLHttpRequest2 http://habrahabr.ru/post/120917/

Адрес сайта проекта: http://doit0.ru

Если Вас заинтересовала данная статья и Вы бы хотели научиться делать проекты такого уровня, то приглашаем Вас на наши курсы, которые будет вести Андрейчиков Юрий Сергеевич, сертифицированный программист 1с-битрикс.



Назад в раздел