Читаємо файли, розташовані локально за допомогою javascript, блог веб-розробників

Читаємо файли, розташовані локально за допомогою javascript, блог веб-розробників

Можливості, що з'являються в браузерах, все більше дивують і захоплюють веб-розробників. Те, що раннє реалізовувалося за допомогою flash'a або аплетів, зараз можна написати на чистому js. Однією з таких дивовижних можливостей стало можливість читання файлів, розташованих локально.

Навіщо це потрібно

Варіантів використання цієї, безумовно, корисної можливості хоч греблю гати:

Перевірка підтримки

Для користувачів, які не бажають йти в ногу з часом і використовують застарілі браузери або IE, необхідно передбачити альтернативну реалізацію того функціоналу, який написаний з використанням file API.

Для перевірки того, чи підтримує браузер file API повністю необхідно просто перевірити наявність таких змінних як File, FileReader, FileList і Blob в глобальному контексті (у властивостях об'єкта window)

Читаємо файли по частинах

Не обов'язково зчитувати весь файл відразу, можна прочитати кілька байт з будь-якої частини файлу. Оперою ця можливість підтримується тільки з версії 11.61.

Номер байта, з якого буде починатися читання файлу, і номер байта, яким читання буде закінчуватися, визначається за допомогою функцій об'єкта Blob webkitSlices (startByte, endByte) для хрому і mozSlice (startByte, endByte) для лисиці. Для того щоб вважати частину файлу повертається цими функціями об'єкт Blob передається, наприклад, функції readAsBinaryString об'єкта FileReader.

Моніторимо прогрес читання

File API надає можливість відстежити прогрес читання локального файлу. У FileReader'а є обробники подій onloadstart і onprogress, що спрацьовують при початку завантаження і прогрес читання файлу. Крім того, за допомогою обробника onerror можна обробляти помилки, що виникли в ході читання файлу.

Покажемо все це на наступному прикладі.