Руководство Javascript FileReader

View more Tutorials:

Pуководства ECMAScript, Javascript

FileReader
Пример с FileReader

1- FileReader

Интерфейс 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.

ArrayBuffer (API)

Blob (API)

File (API)

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:

2- Пример с FileReader

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

File (API)

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.
}

View more Tutorials:

Pуководства ECMAScript, Javascript