Heim > Artikel > Web-Frontend > FileReader implementiert eine lokale Vorschau vor dem Hochladen von Bildern

FileReader implementiert eine lokale Vorschau vor dem Hochladen von Bildern

小云云Original: 2018-03-03 09:10:191505Durchsuche

Wenn beim Hochladen und in der Vorschau keine besonderen Anforderungen bestehen, können Sie das Bild zunächst direkt in den Hintergrund übertragen, die URL abrufen und es dann auf der Seite rendern Wenn das Bild relativ klein ist, ist es in Ordnung, die Vorschau anzuzeigen, und es werden Junk-Dateien generiert. Daher ist es besser, es vor dem Hochladen lokal anzuzeigen.

Als ich nach einem Plug-In suchte, wusste ich, dass das reine Frontend eine lokale Vorschau von Bildern realisieren kann. Als ich heute gefragt wurde, war ich jedoch verwirrt Dann habe ich es zufällig auf dem Computer-Desktop entdeckt und dann die API anhand der Demo überprüft und kurz zusammengefasst:

Zuerst müssen Sie das Dateiobjekt abrufen

Beim Hochladen eines Bildes mit dem Eingabe-Tag enthält das Ereignisobjekt das Dateiobjekt. Eine Sammlung

event.target.files

ist im Kern ein FileReader-Objekt

Laut MDN: Das

FileReader-Objekt ermöglicht es Webanwendungen, den Inhalt einer Datei (oder eines Rohdatenpuffers) asynchron zu lesen, die auf dem Computer des Benutzers gespeichert ist. Verwenden Sie ein Datei- oder Blob-Objekt, um die Datei oder Daten anzugeben, die gespeichert werden sollen lesen.

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 > 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. Eine andere Sache ist, dass Sie den Code mit Ihren Händen eingeben und versuchen können, ihn nicht zu kopieren. Es macht zwar eine Zeit lang 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. Wenn die Technologie voranschreiten soll, muss dieser Eckpfeiler stabil sein. Denken Sie also daran!

<!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>

Verwandte Empfehlungen:

Wie liest die Dateidomäne FileReader von H5 Dateien in Segmenten und lädt sie auf den Server hoch?

JavaScript verwendet FileReader, um das Hochladen von Bildern zu erreichen Vorschaueffekte

Analyse der Verwendung der FileReader-Schnittstelle in HTML5

Das obige ist der detaillierte Inhalt vonFileReader implementiert eine lokale Vorschau vor dem Hochladen von Bildern. 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：Fallstricke und Lösungen, auf die FastClick stößtNächster Artikel：Fallstricke und Lösungen, auf die FastClick stößt

In Verbindung stehende Artikel

Mehr sehen