Свойства файлов

Свойства файлов.

В реальных приложениях, для того чтобы информировать пользователя о проходящих обработку файлах, а также для контроля над загружаемыми файлами, всегда нужно каким-то образом извлекать такую информацию, как имя файла, его размер или даже тип. Объект файла, отправляемый тегом <input>, предоставляет несколько свойств, позволяющих получить эту информацию:

- name. Возвращает полное имя файла (название и расширение);

- size. Возвращает размер файла в байтах;

- type. Возвращает тип файла как тип MIME.

Листинг 12.4. Загрузка изображений

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]; if(!file. type. match(/image.*/i)){ alert(‘insert an image’);

}else{

Databox. innerHTML+^Имя: ‘+file. name+’<br>’; databox. innerHTML+=’Pa3Mep: ‘+file. size+’ bytes<br>’;

Var reader=new FileReader();

Reader. onload=show;

Reader. readAsDataURL(file);

Function show(e){

Var result=e. target. result; databox. innerHTML+=’<img src="’+result+’">’;

}

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

Пример из листинга 12.4 очень похож на предыдущий, только на этот раз для считывания файла мы применили метод readAsDataURL(). Он возвращает содержимое файла в формате data:url, и его в дальнейшем можно использовать в качестве источника для тега <img>, чтобы вывести выбранное изображение на экран.

Если перед нами стоит задача обработать файл определенного типа, вполне естественно, что первым делом мы проверяем свойство этого файла под названием type. В функции process() из листинга 12.4 такая проверка выполняется при помощи старого метода match(). Если выясняется, что это не файл изображения, то метод alert() выводит на экран сообщение об ошибке. Если же все в порядке и это файл изображения, то на экран выводятся имя и размер, а также сама картинка.

Несмотря на то что мы выбрали другой метод, а именно readAsDataURL(), процесс открытия файла не изменился. Сначала создается объект FileReader, затем регистрируется обработчик события onload, и, наконец, файл загружается. После завершения этого процесса содержимое свойства result передается в функцию show(), где используется в качестве источника для тега <img>, для того чтобы изображение появилось на странице.

Для построения фильтра мы использовали регулярные выражения и давно существующий методJavaScript match(). Этот метод ищет соответствие между регулярным выражением и строкой и возвращает либо массив совпадений, либо значение null. Тип MIME для изображения может быть, например, image/jpeg, если формат файла JPG, или image/gif, если GIF, поэтому выражение/image.*/i позволяет ограничить чтение файлов только файлами изображений.

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

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