Fassen Sie die Einführung der JS-Implementierung der Bildvorschau zusammen

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 geben. 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. Sie kann in vier Schritte unterteilt werden Objekt; 2. Rufen Sie die readAsDataURL-Methode auf, um die Datei zu lesen. 3. Rufen Sie das onload-Ereignis auf, um die Daten zu überwachen, aber wir wissen nicht, wann die Datei gelesen wurde. 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 der detaillierte Inhalt vonFassen Sie die Einführung der JS-Implementierung der Bildvorschau zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!