Загрузка файлов на сервер

Загрузка файлов на сервер.

Задача загрузки файлов на сервер неизменно вызывает головную боль у всех веб-разработчиков. Эта возможность востребована почти в каждом современном приложении, но не учтена в браузерах. Рассматриваемый API решает данную проблему. Он предлагает новый атрибут, возвращающий объект XMLhttpRequestUpload, который позволяет использовать все методы, свойства и события объектов XMLhttpRequest, а также контролировать процессы загрузки. Атрибут upload возвращает объект XMLhttpRequestUpload. Его необходимо вызывать из существующего объекта XMLhttpRequest.

Для работы с этими атрибутом и объектами нам понадобится новый шаблон. Он будет включать в себя поле <input> для выбора файла, предназначенного для загрузки на сервер.

Листинг 13.8. Шаблон для загрузки файлов на сервер

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Ajax Level 2</title>

<link rel="stylesheet" href="ajax. css">

<script src="ajax. js"></script>

</head>

<body>

<section id="formbox"> form name="form">

<р>Файл для 3arpy3KM:<br><input type="file" name="myfiles" id="myfiles"></p>

</form>

</section>

<section id="databox"></section>

</body>

</html>

Для того чтобы загрузить файл на сервер, нужно вставить в поле на форме ссылку на файл. Объект FormData, который мы изучили в предыдущем примере, отлично справляется с обработкой такого типа данных. Система автоматически определяет, какая информация добавляется в объект FormData, и создает соответствующие заголовки для запроса. Далее процесс протекает точно так же, как в других примерах ранее в этой главе.

Function initiate(){

Databox=document. getElementById(‘databox’);

Var myfiles=document. getElementById(‘myfiles’); myfiles. addEventListener(‘change’, upload, false);

}

Function upload(e){

Var files=e. target. files; var file=files[0];

Var data=new FormData(); data. append(‘file’,file);

Var url="process. php";

Var request=new XMLhttpRequest();

Var xmlupload=request. upload;

Xmlupload. addEventListener(‘loadstart’,start, false); xmlupload. addEventListener(‘progress’,status, false); xmlupload. addEventListener(‘load’,show, false); request. open("POST", url, true); request. send(data);

}

Function start(){

Databox. innerHTML=’<progress value="0" max="100">0%</progress>’;

}

Function status(e){

If(e. lengthComputable){

Var per=parseInt(e. loaded/e. total*100);

Var progressbar=databox. querySelector("progress");

Progressbar. value=per;

Progressbar. innerHTML=per+’%';

}

}

Function show(e){

Databox. innerHTML=’Готово’;

}

Window. addEventListener(‘load’, initiate, false);

Главная функция в листинге 13.9 — это upload(). Она вызывается, когда пользователь выбирает новый файл в элементе <input> нашего шаблона (то есть когда срабатывает событие change). Выбранный файл мы

Извлекаем и сохраняем в переменной file точно так же, как делали это раньше при изучении файлового API в главе 12 и API перетаскивания в главе 8. Все эти методы возвращают один и тот же объект File.

После того как ссылка на файл получена, создается объект FormData и мы присоединяем к нему наш файл при помощи метода append(). Для отправки формы инициируем запрос типа POST. Сначала с переменной request связывается обычный объект XMLhttpRequest. Затем с помощью атрибута upload создается объект XMLhttpRequestUpload, который в нашем коде представляет переменная xmlupload. Используя эту новую переменную, мы добавляем прослушиватели событий для всех событий процесса загрузки и наконец отправляем запрос.

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

Вам также могут быть интересны следующие статьи:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *