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

FileReader implementiert eine lokale Vorschau vor dem Hochladen von Bildern

php中世界最好的语言Original: 2018-04-12 14:53:291499Durchsuche

Dieses Mal bringe ich Ihnen FileReader zur lokalen Vorschau, bevor Sie Bilder hochladen. Was sind die Vorsichtsmaßnahmen? sehen. .

Einführung

Wenn beim Hochladen und in der Vorschau keine besonderen Anforderungen bestehen, 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. Als ich heute jedoch im Interview danach gefragt wurde, war ich zufällig verwirrt Ich habe die implementierte Demo auf dem Computer-Desktop gefunden und dann anhand der Demo einen Blick auf die API geworfen und sie kurz zusammengefasst:

Zuerst müssen Sie das File-Objekt abrufen

Wenn Sie das Eingabe-Tag verwenden, um ein Bild hochzuladen, enthält das Ereignisobjekt eine Sammlung von Dateiobjekten

event.target.files

Der Kern ist das FileReader-Objekt

Laut MDN:

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.

Rufen Sie zunächst als -Konstruktor ein Instanzobjekt von FileReader

var freader = new FileReader();

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

freader.readAsDataURL(file);

zu lesen Das Letzte ist eine Ereignisverarbeitung, die 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); }

Nachdem das Rack geladen ist, erhalten Sie endlich eine Base64-codierte Quelladresse. Ich werde das nächste Mal den genauen Grund herausfinden und einen speziellen Artikel über die Base64-Codierung schreiben

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>

Nachtrag

Dieser Vorfall hat eines meiner Probleme beim Erlernen neuer Dinge offenbart. Ich muss es nur einmal nachschlagen, bevor ich es weiß. Diese Angewohnheit ist besonders schädlich, wenn ich in Zukunft nicht nur nachschlagen muss Wie es geht. Ja, Sie müssen auch verstehen, warum Sie das tun können. Das sogenannte Wissen, was es ist und warum es so ist. 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen Website php.

Empfohlene Lektüre:

So exportieren Sie Excel aus der Element-Benutzeroberfläche

Detaillierte Erläuterung der Schritte für vue-dplayer zur Implementierung der HLS-Wiedergabe

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!

php 构造函数 Event 对象事件异步 input ui

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：5 Möglichkeiten zum Durchlaufen von Arrays in JavaScriptNächster Artikel：5 Möglichkeiten zum Durchlaufen von Arrays in JavaScript

In Verbindung stehende Artikel

Mehr sehen