Die Anleitung zu Javascript FileReader

FileReader
Das Beispiel mit FileReader

1. FileReader

Die Interface FileReader im Javascript wird gestaltet, um die Datenquelle in dem Computer des Benutzer zu lesen. Achtung: Tatsächlich kann Javascript die Ressourcen in dem Computer des Benutzer nur lesen wenn der Benutzer die Zulassungsaktionen hat, z.B der Benutzer klickt auf das Element <input type="file"> um die Files im Computer zu wählen oder die File in dem Browser zu ziehen.

FileReader kann die Objekte File, Blob oder DataTransfer lesen (das Objekt wird abgerufen wenn der Benutzer eine File in den Browser zieht und ablegt).

API von FileReader wird mit dem so ähnlichen Zweck wie XMLHttpRequest gestaltet denn die beiden hat das Zweck als das Laden des externe Datenquelle (external resource). Die Daten wird asynchron gelesen um zu verhindern, dass der Browser während des Prozesses blockiert wird.

Constructor

// Create a FileReader object:

var fileReader = new FileReader();

Properties

Property	Die Bezeichnung
error	Ein Objekt DOMException bezeichnet die Fehler, die beim Lesen der Datenquelle auftreten
readyState	Eine Zahl bezeichnet den Zustand von FileReader. Die Wert können 0, 1, 2 sein.
result	Die Inhalt der Datenquelle nach dem erfolgreichen Lesen. Seine Format hängt davon, welche Methode beim Starten vom Lesen benutzt werden.

Die möglichen Werte von fileReader.readyState:

FileReader.EMPTY	0	Keine Daten werden geladet (load)
FileReader.LOADING	1	Die Daten werden geladet.
FileReader.DONE	2	Die ganzen Daten wurden geladet

Methods

Property	Die Bezeichnung
abort()	Die Aktion Lesen absagen. Die Wert von readyState ist FileReader.DONE.
readAsArrayBuffer(blobOrFile)	Die Inhalt von blobOrFile zu lesen beginnen, wenn fertig, ist fileReader.result ein Objekt ArrayBuffer.
readAsBinaryString(blobOrFile)	Die Inhalt von blobOrFile zu lesen beginnen, wenn fertig, ist fileReader.result ein Binary String.
readAsDataURL(blobOrFile)	Die Inhalt von blobOrFile zu lesen beginnen, wenn fertig, ist fileReader.result eine URL, die die gelesenen Daten vertritt.
readAsText(blobOrFile[,encoding])	Die Inhalt von blobOrFile zu lesen beginnen, wenn fertig, ist fileReader.result ein String.

ArrayBuffer (API)
Blob (API)
File (API)

Events

Beim Laden der Datenquelle mit FileReader löst es die Events aus, die in die Interface ProgressEvent bezeichnet werden. Das sind:

Event	Die Bezeichnung
loadstart	Gibt an,dass das Laden (load) der Daten begun. Das Event wird immer zuerst ausgelöst.
progress	Das Event löst vielmal aus wenn die Daten gerade geladen werden, wodurch der Zugriff auf die Zwischendaten erlaubt wird.
error	Das Event wird ausgelöst wenn das Laden der Daten fehlerhaft ist.
abort	Das Event wird ausgelöst wenn das Laden der Daten durch den Aufruf des Method abort() abgesagt wird (das Method von die beiden XMLHttpRequest & FileReader).
load	Das Event wird ausgelöst wenn alle Daten erfolgreich geladet werden
loadend	Das Event wird ausgelöst wenn das Objekt die Datenübertragung erledigt hat. Immer nach dem Event error, abort, oder load auslösen

Javascript ProgressEvent

Event Handlers

Handler	Die Bezeichnung
onloadstart(progressEvt)	Ein Handler für das Event loadstart.
onprogress(progressEvt)	Ein Handler für das Event progress.
onerror(progressEvt)	Ein Handler für das Event error.
onabort(progressEvt)	Ein Handler für das Event abort.
onload(progressEvt)	Ein Handler für das Event load.
onloadend(progressEvt)	Ein Handler für das Event loadend.

Die Schritte zur Arbeit mit FileReader:

2. Das Beispiel mit FileReader

In diesem Beispiel zieht und legt der Benutzer eine File in ein Element <div> ab. FileReader wird benutzt um die grundlegenden Information und die Inhalt der durch den Benutzer abgelegten File zu lesen.

https://developer.mozilla.org/en-US/docs/Web/API/File

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

Zum Beispiel: Der Benutzet wählt eine File durch das Element <input type="file"> aus. Verwenden Sie FileReader um die grundlegenden Information und die Inhalt der gewählten File zu lesen

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

Wenn Sie das Method fileReader.readAsDataURL(blobOrFile) benutzt, wenn fertig, wird fileReader.result eine URL zurückgeben, die die gelesenen File vertritt, zum Beispiel:

data:application/x-msdownload;base64,TVqQAA.....ACAEA

data:image/png;base64,iVBORw...eYm57Ad6m6uHj96j

Zum Beispiel: Der Benutzer wählt eine Bild-File in den Computer und vewendet das Method filerReader.readAsDataURL(file) um die gewählte File zu lesen. fileReader.result wird eine URL zurückgeben. Legen Sie diese URL für das Attribut src des Element <img> fest um die Foto in den Brower anzuzeigen.

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

Die Anleitung zu Javascript FileReader

1. FileReader

2. Das Beispiel mit FileReader

Anleitungen ECMAScript, Javascript

Anleitungen ECMAScript, Javascript

Neueste Artikel