Zwei Möglichkeiten, die Bildvorschau in Javascript zu implementieren

In diesem Artikel werden hauptsächlich zwei Möglichkeiten zur Implementierung der Bildvorschau mit JS vorgestellt. Es ist sehr gut und hat Referenzwert.

In Anbetracht der Benutzererfahrung Vor dem Hochladen des Bildes in die -Datenbank ist die Vorschau des Bildes ein notwendiger Schritt. Erstens kann es dem Benutzer ein Gefühl der Sicherheit vermitteln. Zweitens kann es verhindern, dass Bilddateien fällig an die Datenbank übermittelt werden zu Problemen führen und Speicherressourcen belegen.

Dann gibt es zwei Möglichkeiten, die Vorschau zu implementieren: Eine besteht darin, die Methode window.URL.createObjectURl zu verwenden, um einen Blob-Objektpfad für die ausgewählten Bilddaten zu generieren (der kaum als Wert von verstanden werden kann). die Eingabe); die zweite besteht darin, den FileReader-Reader zu erhalten.

Unabhängig von der Methode müssen Sie zunächst die Dateidaten aus der Dateisammlung abrufen.

Methode 1:

Der Code lautet wie folgt:

<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
 img.src=url;
 //其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>

Methode 2:

Verwenden Sie das FileRader-Objekt , um die Datei zu lesen vier Schritte: 1. Erstellen Sie ein FileReader-Objekt. 2. Rufen Sie die readAsDataURL-Methode auf, um die Datei zu lesen. Wir müssen die vollständigen Daten abrufen wann wurde die Datei gelesen? Daher ist der dritte Schritt der Überwachung erforderlich. 4. Erhalten Sie das Leseergebnis über das ErgebnisAttribut des FileRader-Objekts r. Der Code lautet wie folgt:

<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   p.appendChild(img);
 }
 }

Das Obige ist die JS-Implementierungsbildvorschau, die von eingeführt wurde Herausgeber Es gibt mehrere Möglichkeiten. Ich hoffe, dass es Ihnen hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für Ihre Unterstützung der Script House-Website bedanken!

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, die Bildvorschau in Javascript zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!