События API

В зависимости от размера файла длительность процесса его загрузки в память может сильно варьироваться. Для небольших файлов это кажется мгновенной операцией, но загрузка объемных файлов порой занимает до нескольких минут. Помимо рассмотренного события load, наш API предоставляет несколько других специальных событий, информирующих обо всех деталях процесса:

— loadstart. Срабатывает на объекте FileReader в момент, когда загрузка начинается;

— progress. Срабатывает периодически во время считывания файла или бинарного блока;

— abort. Срабатывает в случае, если процесс прерывается;

— error. Срабатывает в случае ошибки считывания;

— loadend. Аналогично событию load, но срабатывает в обоих случаях, как при успешном завершении, так и при завершении с ошибкой.

Листинг 12.6. Контролирование процесса с помощью событий

Function initiate(){

Databox=document. getElementById(‘databox’); var myfiles=document. getElementById(‘myfiles’); myfiles. addEventListener(‘change’, process, false);

}

Function process(e){

Var files=e. target. files;

Databox. innerHTML=»;

Var file=files[0];

Var reader=new FileReader();

Reader. onloadstart=start;

Reader. onprogress=status;

Reader. onloadend=function(){ show(file); };

Reader. readAsBinaryString(file);

}

Function start(e){

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

}

Function status(e){

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

‘<progress value="’+per+’" max="100">’+per+’%</progress>’;

}

Databox. innerHTML=’Имя: ‘+file. name+'<br>’; databox. innerHTML+^Тип: ‘+file. type+'<br>’; databox. innerHTML+=’Размер: ‘+file. size+’ bytes<br>’;

}

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

В коде из листинга 12.6 мы создали приложение, которое загружает файл и визуально сообщает о прогрессе операции, обновляя индикаторную полосу. Для объекта FileReader зарегистрировали три обработчика событий, позволяющих контролировать процесс считывания, а для реагирования на эти события создали две новые функции: start() и status(). Функция start() инициализирует полосу прогресса со значением 0 % и выводит ее на экран. С индикаторной полосой можно связать любые значение или диапазон, но мы решили использовать процентные показатели, для того чтобы пользователям было проще ориентироваться. В функции status() мы вычисляем процентное значение загрузки, основываясь на значениях свойств loaded и total, которые возвращает событие progress. Полоса прогресса заново создается на экране каждый раз, когда срабатывает событие progress.

Используя шаблон из листинга 12.1 и JavaScript-код из листинга 12.6, попробуйте загрузить большой файл, например видеофайл или файл данных, чтобы протестировать полосу прогресса. Если браузер не распознает элемент <progress>, то вместо визуального представления вы увидите на экране содержимое элемента.

Для добавления нового элемента <progress> к документу мы использовали innerHTML. Так делать не рекомендуется, однако подобная практика может быть удобной и полезной в таких небольших задачах, как наша. Обычно элементы добавляются в DOM с помощью методов JavaScript createElement() и appendChild().