FileReader

FileReader - об'єкт для читання даних з файла.

Синтаксис:

var obFile = new FileReader();

Параметри:

obFile - зміна яка отримує об'єкт.

new - оператор new.

Опис:

FileReader об'єкт призначений для асинхроного читання дани з файлу пристрою користувача.

FileReader (File API) з'явився у HTML5, тому старі браузери не підтримують.

Файл можуте бути отриманий з об'єкта FileList, повернутого в результаті вибору користувачем файлів за допомогою елемента input:

<input type="file">

Файл читається асинхроно методами: FileReader.readAsArrayBuffer(), FileReader.readAsBinaryString(), FileReader.readAsDataURL(), FileReader.readAsText().

Після визову методу для читання даних з файлу відбуваються події у наступному порядку: onloadstart, onprogress, onload, onloadend.

Прочитані дані з файлу записуються у властивість result. Тип даних залижить від методу який читав файл.

Приклад:

Відкриваємо зображення з пристрою користувача за допомогою FileReader:

Виберіть зображення:

document.getElementById("test").onchange=function(){ var f=[]; for(i=0; i<this.files.length; i++){ f[i]= new FileReader(); f[i].onload=function(){ var img=document.createElement("img"); img.src=this.result; img.style.padding="2px"; img.style.width="250px"; img.style.height="250px"; document.getElementById("testImg").appendChild(img); } f[i].readAsDataURL(this.files[i]); } }

Відкриваємо текстовий файл на пристрої користувача за допомогою FileReader:


<input id="test2" type="file"> <select id="testCode"> <option value="UTF-8" selected>UTF-8</option> <option value="CP1251">CP1251</option> <option value="ISO-8859-1">ISO-8859-1</option> </select> <textarea id="testText"></textarea> document.getElementById("test2").onchange=function(e){ var fl= new FileReader(); fl.onload=function(e){ document.getElementById("testText").value=this.result; }; fl.readAsText(e.target.files[0], document.getElementById("testCode").value); }