Heim > Artikel > Web-Frontend > So können Sie Bilder beim Hochladen lokal in der Vorschau anzeigen

So können Sie Bilder beim Hochladen lokal in der Vorschau anzeigen

php中世界最好的语言Original: 2018-03-17 11:53:441955Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die lokale Vorschau beim Hochladen von Bildern implementieren. 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 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

Was ich normalerweise mache: Wenn keine besonderen Anforderungen vorliegen, laden Sie das Bild einfach direkt in den Hintergrund hoch, rufen Sie die URL ab und rendern Sie sie dann auf der Seite Wenn das Bild relativ klein ist, ist die Vorschau langsamer und es werden Junk-Dateien generiert. Daher ist es besser, es 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 versehentlich die Implementierung auf dem Computer-Desktop entdeckt und dann die API basierend auf der Demo überprüft und kurz zusammengefasst:

Zuerst müssen Sie das Dateiobjekt abrufen

Bei Verwendung der Eingabe Wenn das Tag

ein Bild hochlädt, enthält das Ereignisobjekt eine Sammlung von Dateiobjekten

event.target.files

Der Kern ist das FileReader-Objekt

Laut MDN:

Das FileReader-Objekt ermöglicht einer Webanwendung, den Inhalt von asynchron zu lesen Eine Datei (oder ein Rohdatenpuffer), die auf dem Computer des Benutzers gespeichert ist und ein Datei- oder Blob-Objekt verwendet, um die gelesenen abgerufenen Dateien oder Daten anzugeben.

Zuerst als

Konstruktor

ein Instanzobjekt von FileReader abrufen

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

var freader = new FileReader();

Das Letzte ist eine

Ereignisverarbeitung

freader.readAsDataURL(file);

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

Danach Das Regal ist geladen, wir bekommen endlich eine Base64-codierte Quelladresse. Ich werde das nächste Mal herausfinden, warum und einen speziellen Artikel über Base64-Codierung schreiben

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

Vollständiger Code

Ich glaube dir Ich habe es gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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

Empfohlene Lektüre:

Cookie-Ablauf, automatische Aktualisierung und automatische Erfassung festlegen

Verwenden Sie import und require, um JS zu verpacken

So gehen Sie mit der Optionsüberlagerung von select um

Das obige ist der detaillierte Inhalt vonSo können Sie Bilder beim Hochladen lokal in der Vorschau anzeigen. 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 JS-Implementierung von todolistNächster Artikel：Detaillierte Erläuterung der JS-Implementierung von todolist

In Verbindung stehende Artikel

Mehr sehen