Руководство Javascript FileReader
View more Tutorials:
Интерфейс FileReader в Javascript смоделирован для чтения источников данных на компьютерах пользователей. Примечание: На самом деле Javascript может прочитать источники данных пользователей только в том случае, если у пользователя есть позволяющие действия, например пользователь нажимает на элемент <input type="file"> чтобы выбрать файл на компьютере, или переместить файлы в браузер.
FileReader может прочитать объекты File, Blob или DataTransfer (Данный объект получается, когда пользователь перемещает файл в браузер).
API у FileReader смоделирован с главной целью индентичной XMLHttpRequest так как оба имеют цель скачать внешний источник данных (external resource). Чтение данных выполненно асинхронно (asynchronously), чтобы избежать блокирования(block) браузера, когда выполняется процесс.
Constructor
// Create a FileReader object: var fileReader = new FileReader();
Properties
Property | Описание |
error | Объект DOMException описывает ошибку, произошедшую в процессе чтения источника данных. |
readyState | Число, описывающее статус у FileReader. Значениями могут быть: 0, 1, 2. |
result | Содержание источника данных после успешного чтения. Его формат зависит от использованного метода при начале чтения. |
Возможные значение у fileReader.readyState:
FileReader.EMPTY | 0 | Не имеется загруженных данных (load) |
FileReader.LOADING | 1 | Данные загружаются. |
FileReader.DONE | 2 | Данные полностью загружены. |
Methods
Property | Описание |
abort() | Отменяет операцию чтения. Значением readyState будет FileReader.DONE. |
readAsArrayBuffer(blobOrFile) | Начинает чтение содержания blobOrFile, при завершении, fileReader.result будет объектом ArrayBuffer. |
readAsBinaryString(blobOrFile) | Начинает чтение содержания blobOrFile, при завершении, fileReader.result будет Binary String. |
readAsDataURL(blobOrFile) | Начинает чтение содержания blobOrFile, при завершении, fileReader.result будет URL представляющий данные. |
readAsText(blobOrFile[,encoding]) | Начинает чтение содержания blobOrFile, при завершении, , fileReader.result будет String. |
Events:
В процессе загрузки (load) источника данных с FileReader будут выпускаться (fire) события, описанные в интерфейсе ProgressEvent, точнее:
Событие | Описание |
---|---|
loadstart | Дает знать, что процесс загрузки (load) данных начался. Данное событие всегда запускается первым. |
progress | Данное событие запускается много раз когда загружаются данные, позволяет получить доступ к промежуточным данным. |
error | Данное событие запускается, когда происходит ошибка в процессе загрузки данных. |
abort | Данное событие запускается, когда отменяется загрузка данных, при вызове метода abort() (Метод имеется для обоих XMLHttpRequest & FileReader). |
load | Данное событие запускается, когда все данные успешно загружены (load). |
loadend | Данное событие запускается, когда объект завершил передачу данных. Всегда запускается после события error, abort, или load. |
- TODO Link!
Event Handlers
Handler | Описание |
---|---|
onloadstart(progressEvt) | Обработчик (handler) для события loadstart. |
onprogress(progressEvt) | Обработчик (handler) для события progress. |
onerror(progressEvt) | Обработчик (handler) для события error. |
onabort(progressEvt) | Обработчик (handler) для события abort. |
onload(progressEvt) | Обработчик (handler) для события load. |
onloadend(progressEvt) | Обработчик (handler) для события loadend. |
Шаги для работы с FileReader:

В данном примере, пользователь перетаскивает файл в элемент <div>. FileReader будет использоваться для чтения базовой информации и содержание файла, перемещенного пользователем.

filereader-drop-example.html
<!DOCTYPE html> <html> <head> <title>FileReader Example</title> <meta charset="UTF-8"> <script src="filereader-drop-example.js"></script> <style> #drop-area { border: 1px solid blue; padding: 15px; margin-top:5px; } </style> </head> <body> <h3>FileReader example</h3> <a href="">Reset</a> <div id="drop-area" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)"> Drop one file here </div> <output id="log-div"></output> </body> </html>
filereader-drop-example.js
function dropHandler(evt) { evt.stopPropagation(); evt.preventDefault(); // FileList object. var files = evt.dataTransfer.files; if (files.length != 1) { resetLog(); appendLog("Please drag and drop 1 file!"); return; } var file = files[0]; var fileReader = new FileReader(); fileReader.onloadstart = function(progressEvent) { resetLog(); appendLog("onloadstart!"); var msg = "File Name: " + file.name + "<br>" + "File Size: " + file.size + "<br>" + "File Type: " + file.type; appendLog(msg); } fileReader.onload = function(progressEvent) { appendLog("onload!"); var stringData = fileReader.result; appendLog(" ---------------- File Content ----------------: "); appendLog(stringData); } fileReader.onloadend = function(progressEvent) { appendLog("onloadend!"); // FileReader.EMPTY, FileReader.LOADING, FileReader.DONE appendLog("readyState = " + fileReader.readyState); } fileReader.onerror = function(progressEvent) { appendLog("onerror!"); appendLog("Has Error!"); } // Read file asynchronously. fileReader.readAsText(file, "UTF-8"); // fileReader.result -> String. } function dragoverHandler(evt) { evt.stopPropagation(); evt.preventDefault(); // Explicitly show this is a copy. evt.dataTransfer.dropEffect = 'copy'; } function resetLog() { document.getElementById('log-div').innerHTML = ""; } function appendLog(msg) { document.getElementById('log-div').innerHTML += "<br>" + msg; }
-
Например, пользователь выбирает файл через элемент <input type="file">. Используйте FileReader для чтения базовой информации и содержания файла, выбранного пользователем.

filereader-input-example.html
<!DOCTYPE html> <html> <head> <title>FileReader Example</title> <meta charset="UTF-8"> <script src="filereader-input-example.js"></script> </head> <body> <h3>FileReader example</h3> <a href="">Reset</a> <br><br> <input type="file" onchange = "changeHandler(event)"> <br><br> <output id="log-div"></output> </body> </html>
filereader-input-example.js
function changeHandler(evt) { evt.stopPropagation(); evt.preventDefault(); // FileList object. var files = evt.target.files; var file = files[0]; var fileReader = new FileReader(); fileReader.onloadstart = function(progressEvent) { resetLog(); appendLog("onloadstart!"); var msg = "File Name: " + file.name + "<br>" + "File Size: " + file.size + "<br>" + "File Type: " + file.type; appendLog(msg); } fileReader.onload = function(progressEvent) { appendLog("onload!"); var stringData = fileReader.result; appendLog(" ---------------- File Content ----------------: "); appendLog(stringData); } fileReader.onloadend = function(progressEvent) { appendLog("onloadend!"); // FileReader.EMPTY, FileReader.LOADING, FileReader.DONE appendLog("readyState = " + fileReader.readyState); } fileReader.onerror = function(progressEvent) { appendLog("onerror!"); appendLog("Has Error!"); } // Read file asynchronously. fileReader.readAsText(file, "UTF-8"); // fileReader.result -> String. } function resetLog() { document.getElementById('log-div').innerHTML = ""; } function appendLog(msg) { document.getElementById('log-div').innerHTML += "<br>" + msg; }
-
Если вы используете метод fileReader.readAsDataURL(blobOrFile), при завершении, fileReader.result возвращает URL представляющий прочитанные данные, например:
data:application/x-msdownload;base64,TVqQAA.....ACAEA data:image/png;base64,iVBORw...eYm57Ad6m6uHj96j
Например: Пользователь выбирает файл изображения на компьютере, используя метод filerReader.readAsDataURL(file) для чтения выбранного пользоавателем файла. fileReader.result возвратит URL. Настройте данный URL для атрибута (attribute) src элемента <img> чтобы отобразить изображение на браузере.

show-local-image-example.html
<!DOCTYPE html> <html> <head> <title>FileReader Example</title> <meta charset="UTF-8"> <script src="show-local-image-example.js"></script> </head> <body> <h3>Select Image to Show</h3> <input type="file" onchange = "changeHandler(event)"> <br><br> <img id="myimage" src=""> </body> </html>
show-local-image-example.js
function changeHandler(evt) { evt.stopPropagation(); evt.preventDefault(); // FileList object. var files = evt.target.files; var file = files[0]; var fileReader = new FileReader(); fileReader.onload = function(progressEvent) { var url = fileReader.result; // Something like: data:image/png;base64,iVBORw...Ym57Ad6m6uHj96js console.log(url); // var myImg = document.getElementById("myimage"); myImg.src= url; } // Read file asynchronously. fileReader.readAsDataURL(file); // fileReader.result -> URL. }