FileReader ist ein wichtiger Teil der File-API
Wird zum Lesen lokaler Dateien verwendet

FileReader

Erstellen

Zur Verwendung der Dateilesefunktion
It ist auch notwendig, um das FileReader-Objekt zu instanziieren

var fr = new FileReader();

Es stellt uns einige Schnittstellenmethoden und Ereignisse zur Verfügung

Methoden

5 Methoden können über das Instanzobjekt aufgerufen werden
4 davon geben Methoden zum Lesen von Dateien an
Die andere Methode wird verwendet, um das Lesen von Dateien zu unterbrechen

Hinweis: Blob (Binary Large Object) ist ein binäres Objekt

Unabhängig von der Datei lesen Ob es erfolgreich ist oder nicht
Diese Funktionen haben keinen Rückgabewert
Das Ergebnis der gelesenen Datei wird im Ergebnisattribut des instanziierten FileReader-Objekts gespeichert

Ereignis

Datei reading Zusätzlich zu den oben genannten Methoden enthält das Objekt
auch einen vollständigen Satz von Ereignismodellen
, mit denen verschiedene Zustände des Dateilesens erfasst werden

• onloadstart: Start reading

• onprogress : Lesung

• onload : Lesung erfolgreich

• onerror : Lesefehler

• onabort: Lesevorgang unterbrochen

• onloadend: Lesevorgang abgeschlossen (unabhängig von Erfolg oder Misserfolg)

Verwenden Sie

Jetzt verwenden wir diesen Filereader, um ein lokales Bild
HTML wie folgt zu lesen
erstellen Sie einfach eine Datei-Leseschaltflächeneingabe
und ein IMG-Tag, um das gelesene Bild anzuzeigen

<input type="file" id="choose"><br><br><img src="" id="image" width=&#39;200px&#39; height=&#39;200px&#39;>

Das js-Skript lautet wie folgt

var choose = document.getElementById('choose');var img = document.getElementById('image');
choose.onchange = function(){
  showImg(this, img);
}function showImg(chooseDom, imgDom){
  var file = chooseDom.files[0]; //获取FileList对象的第一个元素——一个File对象
  var fr = new FileReader(); //实例化FileReader对象
  fr.onload = function(e){ 
    imgDom.src = e.target.result; //e.target引用fr
  }
  fr.readAsDataURL(file); //读取为DataURL}

Nachdem Sie den Knoten erhalten haben,
binden Sie das Änderungsereignis für das Eingabe-Tag
so Jedes Mal Wenn eine Datei ausgewählt ist, wird die showImg-Funktion aufgerufen, um

zu lesen. Um den gelesenen Inhalt zu überprüfen, können Sie file.type

if(!/image\/\w+/.test(file.type)){  
    //...
    return false;  
}

, verwenden Sie einfach readAsText

<input type="file" id="choose"><br><br><p id="demo"></p>

var choose = document.getElementById('choose');
var demo = document.getElementById('demo');
choose.onchange = function(){
  showText(this, demo);
}function showText(chooseDom, textDom){
  var file = chooseDom.files[0];  var fr = new FileReader();
  fr.onload = function(e){
    textDom.innerHTML = e.target.result;
  }
  fr.readAsText(file);
}

Wir müssen ein Dateilesemodul kapseln

Das obige ist der detaillierte Inhalt vonAnalysieren Sie insbesondere die Kapselung des FileReader zum Lesen von HTML5-Dateien und des Dateilesemoduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!