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.error - помилка, яка сталася під час читання файлу.
FileReader.readyState - число , яке вказує стан FileReader.
FileReader.result - вміст прочитаного файлу.

FileReader

FileReader.abort() - перериває операцію читання файлу.
FileReader.readAsArrayBuffer() - читає дані файлу, а результатом є ArrayBuffer.
FileReader.readAsBinaryString() - читає дані файлу, а результатом є необроблені двійкові дані з файлу.
FileReader.readAsDataURL() - читає дані файлу, а результатом є Data URL.
FileReader.readAsText() - читає дані файлу, а результатом є текстовий вміст файлу.

FileReader

FileReader.onabort - перервано читання файлу.
FileReader.onerror - виникла помилка при читанні файлу.
FileReader.onload - файл прочитано. Ця подія виникає коли читання успішно завершено.
FileReader.onloadstart - починається читання файлу.
FileReader.onloadend - завершено читання файлу.
FileReader.onprogress - відбувається читання файлу.

Приклад:

Відкриваємо зображення з пристрою користувача за допомогою 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);
}