Heim > Artikel > Web-Frontend > So verwenden Sie FileReader in JS, um die lokale Vorschaufunktion vor dem Hochladen von Bildern zu implementieren

So verwenden Sie FileReader in JS, um die lokale Vorschaufunktion vor dem Hochladen von Bildern zu implementieren

亚连Original: 2018-06-02 09:52:021847Durchsuche

Das FileReader-Objekt ermöglicht es einer Webanwendung, den Inhalt einer Datei (oder eines Rohdatenpuffers), die auf dem Computer des Benutzers gespeichert ist, asynchron zu lesen, indem ein File- oder Blob-Objekt verwendet wird, um die zu lesende Datei oder die zu lesenden Daten anzugeben. In diesem Artikel wird Ihnen die Verwendung von FileReader in JS vorgestellt, um die lokale Vorschaufunktion vor dem Hochladen von Bildern zu realisieren. Freunde, die sie benötigen, können sich auf die Einführung beziehen

Wenn beim Hochladen und in der Vorschau keine besonderen Anforderungen bestehen, laden Sie das Bild einfach direkt in den Hintergrund hoch, rufen Sie die URL ab und rendern Sie sie dann auf der Seite ist relativ klein. Wenn es größer ist, ist die Vorschau langsamer und es werden Junk-Dateien generiert. Daher ist es besser, sie vor dem Hochladen lokal anzuzeigen.

Als ich an einem Projekt arbeitete und nach einem Plug-In suchte, wusste ich, dass das reine Frontend eine lokale Vorschau von Bildern realisieren kann, aber als ich heute im Interview danach gefragt wurde, war ich es verwirrt, und dann entdeckte ich versehentlich die Implementierung auf dem Computer-Desktop, überprüfte dann die API basierend auf der Demo und fasste sie kurz zusammen:

Zuerst müssen Sie die Datei abrufen Objekt

Beim Hochladen von Bildern mit dem Eingabe-Tag Das Ereignisobjekt enthält eine Sammlung von Dateiobjekten

event.target.files

Der Kern ist das FileReader-Objekt

Laut MDN die obige Aussage:

Das FileReader-Objekt ermöglicht einer Webanwendung das asynchrone Lesen des Inhalts einer Datei (oder Rohdaten). Datenpuffer), der auf dem Computer des Benutzers gespeichert ist, wobei ein Datei- oder Blob-Objekt verwendet wird, um die zu lesende Datei oder die zu lesenden Daten anzugeben.

Zuerst müssen Sie ein Instanzobjekt von FileReader als Konstruktor erhalten

var freader = new FileReader();

Verwenden Sie die Methode readAsDataURL(), um den angegebenen Inhalt zu lesen

freader.readAsDataURL(file);

Die letzte ist eine Ereignisverarbeitung, die der Überwachung des Lesefortschritts entspricht. Hier rendern wir das Bild, wenn der Lesevorgang abgeschlossen ist, also verwenden Sie onload

freader.onload = function(e) { console.log(e); myImg.setAttribute(&#39;src&#39;, e.target.result); }

Nachdem das Rack hier geladen ist, erhalten Sie endlich eine Base64-codierte SRC-Adresse. Den genauen Grund werde ich beim nächsten Mal herausfinden und dann ein Special schreiben Artikel über Base64-Codierung

Vollständig Der Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action=""> 
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 
 </form>
 <script>
 function changImg(e){ 
 var myImg = document.getElementById(&#39;myImg&#39;);
 for (var i = 0; i < e.target.files.length; i++) { 
 var file = e.target.files[i]; 
 console.log(file); 
 if (!(/^image\/.*$/i.test(file.type))) { 
  continue; //不是图片 就跳出这一次循环 
 } 
 //实例化FileReader API 
 var freader = new FileReader(); 
 freader.readAsDataURL(file); 
 freader.onload = function(e) { 
  console.log(e);
  myImg.setAttribute(&#39;src&#39;, e.target.result); 
 } 
 } 
 }
 </script>
</body>
</html>

ist das, was ich für Sie zusammengestellt habe. Ich hoffe, dass er Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So lernen Sie die Process- und Child_Process-Module in Node (ausführliches Tutorial)

über jQuery+ JSONP Cross-Domain-Anfragemethode (ausführliches Tutorial)

Durch Implementierung einer HTTP-Anfrage und Laden der Anzeige in Vue2.0

Das obige ist der detaillierte Inhalt vonSo verwenden Sie FileReader in JS, um die lokale Vorschaufunktion vor dem Hochladen von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So fügen Sie MP3-Audiodateien mithilfe von Vue hinzuNächster Artikel：So fügen Sie MP3-Audiodateien mithilfe von Vue hinzu

In Verbindung stehende Artikel

Mehr sehen