betacode

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

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

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.EMPTY0Не имеется загруженных данных (load)
FileReader.LOADING1Данные загружаются.
FileReader.DONE2Данные полностью загружены.
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.
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 будет использоваться для чтения базовой информации и содержание файла, перемещенного пользователем.
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.
}

 
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.