suchen

Heim  >  Artikel  >  Web-Frontend  >  FileReader zeigt Bilder vor dem Hochladen lokal in der Vorschau an

FileReader zeigt Bilder vor dem Hochladen lokal in der Vorschau an

小云云
小云云Original
2018-03-05 09:43:321023Durchsuche

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. Wenn beim Hochladen und Anzeigen einer Vorschau keine besonderen Anforderungen vorliegen, können Sie das Bild zuerst direkt in den Hintergrund übertragen. Nach dem Erfolg können Sie die URL abrufen und sie dann auf der Seite rendern relativ klein, aber wenn es größer ist, ist es langsamer. Nur dann können Sie die Vorschau sehen und es werden auch 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 habe ich zufällig die Implementierung auf dem Computer-Desktop entdeckt und dann die API anhand der Demo überprüft und kurz zusammengefasst:

Zuerst müssen Sie das Dateiobjekt abrufen

Wenn Sie ein Bild mit dem Eingabe-Tag hochladen, enthält das Ereignisobjekt eine Sammlung von Dateiobjekten

event.target.files

Der Kern ist das FileReader-Objekt

Entsprechend zu MDN:

Das FileReader-Objekt ermöglicht es Webanwendungen, in Benutzerdateien gespeicherte Dateien asynchron zu lesen. Den Inhalt einer Datei (oder eines Rohdatenpuffers) auf dem Computer, wobei ein Datei- oder Blob-Objekt verwendet wird, um die Datei oder Daten anzugeben gelesen werden.

Erstens ein Instanzobjekt von FileReader als Konstruktor abrufen 

var freader = new FileReader();

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

freader.readAsDataURL(file);

Schließlich gibt es das ein Ereignishandler, der der Überwachung des Lesefortschritts entspricht. Hier rendern wir das Bild, wenn der Lesevorgang abgeschlossen ist, also verwenden wir onload

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

Nach dem Laden des Frames ist das Endergebnis ein Base64 -codierte Quelladresse. Nachdem ich sie zum ersten Mal überprüft habe, habe ich einen speziellen Artikel über die Base64-Codierung geschrieben

Vollständiger 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('myImg');
 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>

Postscript

Durch diesen Vorfall habe ich eine meiner Möglichkeiten offengelegt, neue Dinge zu lernen. Das Problem besteht darin, es einfach auszuprobieren und zu glauben, dass man es weiß. In Zukunft ist es besonders schädlich, wenn man eine Frage erfährt Prüfen Sie, wie es gemacht wird, aber verstehen Sie auch, warum es gemacht werden kann. Das sogenannte Wissen Sie wissen warum. Sie können den üblichen Code auch mit Ihren Händen eingeben und versuchen, ihn nicht zu kopieren. Es macht zwar Spaß, ihn zu kopieren, aber es ist peinlich, ihn nicht von Hand schreiben zu können.

Heute ist der dritte Tag in Hangzhou und der zweite Tag der Interviews. Ein wichtiges Problem, das in diesen beiden Interviewtagen aufgedeckt wird, ist, dass ich mich normalerweise zu sehr auf Suchmaschinen verlasse und selbst einige einfache APIs zu wenig verwende Wenn Sie sich nicht an alles erinnern, gibt es im Frontend tatsächlich viele Dinge, die Sie beachten müssen. Es gibt keine Abkürzungen Sie haben ein schlechtes Fundament. Obwohl dies keinen Einfluss auf Ihre Fähigkeit hat, Dinge herzustellen, wirkt es sich auf die Entwicklungseffizienz aus. Damit die Technologie vorankommt, muss dieser Eckpfeiler stabil sein. Denken Sie also daran!

Verwandte Empfehlungen:

So implementieren Sie die lokale Vorschaufunktion für JavaScript-Bilder

jquery implementiert die browserkompatible lokale Vorschaufunktion für das Hochladen von Bildern_ jquery

jquery implementiert die lokale Vorschaufunktion vor dem Hochladen von Bildern_jquery

Das obige ist der detaillierte Inhalt vonFileReader zeigt Bilder vor dem Hochladen lokal in der Vorschau an. 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：Detaillierte Erläuterung der Top-Befehls- und Ausgabeergebnisse unter LinuxNächster Artikel：Detaillierte Erläuterung der Top-Befehls- und Ausgabeergebnisse unter Linux

In Verbindung stehende Artikel

Mehr sehen