Задача загрузки файлов на сервер неизменно вызывает головную боль у всех веб-разработчиков. Эта возможность востребована почти в каждом современном приложении, но не учтена в браузерах. Рассматриваемый API решает данную проблему. Он предлагает новый атрибут, возвращающий объект XMLhttpRequestUpload, который позволяет использовать все методы, свойства и события объектов XMLhttpRequest, а также контролировать процессы загрузки. Атрибут upload возвращает объект XMLhttpRequestUpload. Его необходимо вызывать из существующего объекта XMLhttpRequest.
Для работы с этими атрибутом и объектами нам понадобится новый шаблон. Он будет включать в себя поле <input> для выбора файла, предназначенного для загрузки на сервер.
К слову, основой любого web проекта является конечно же сервер, который должен быть стабильным, производительным и грамотно сконфигурированным. Если администрирование вам чуждо – лучше всего делегировать функцию администрирования сервера опытным специалистам.
Листинг. Шаблон для загрузки файлов на сервер
<!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);
Главная функция в листинге — это upload(). Она вызывается, когда пользователь выбирает новый файл в элементе <input> нашего шаблона (то есть когда срабатывает событие change). Выбранный файл мы
Извлекаем и сохраняем в переменной file точно так же, как делали это раньше при изучении файлового API и API перетаскивания. Все эти методы возвращают один и тот же объект File.
После того как ссылка на файл получена, создается объект FormData и мы присоединяем к нему наш файл при помощи метода append(). Для отправки формы инициируем запрос типа POST. Сначала с переменной request связывается обычный объект XMLhttpRequest. Затем с помощью атрибута upload создается объект XMLhttpRequestUpload, который в нашем коде представляет переменная xmlupload. Используя эту новую переменную, мы добавляем прослушиватели событий для всех событий процесса загрузки и наконец отправляем запрос.
Оставшаяся часть кода ничем не отличается от того, что вы уже видели в листинге. Другими словами, когда процесс загрузки начинается, на экране отобразится индикатор процесса. Вид индикатора обновляется в соответствии с тем, на каком этапе в данный момент находится процесс отправки файла на сервер.
Добавить комментарий