Руководство 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.
}
*
