Implementieren Sie jquery, um Bilder vor dem Hochladen lokal in der Vorschau anzuzeigen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen vorstellen, um jquery für die lokale Vorschau vor dem Hochladen von Bildern zu implementieren und jquery für die lokale Vorschau vor dem Hochladen von Bildern zu implementieren. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Es gibt ein kleines Problem vor der Einführung: Wenn ich die Bildvorschau nicht finden kann, liegt der Grund dafür, dass das Bild nicht angezeigt wird, am Pfad des Bildes! ! ! Was ich immer wieder schreibe, ist der lokale Pfad des Bildes, der keinen Nutzen hat. Gehen Sie direkt zum Code.

HTML-Teil:

<img id="pic" src="" >
<input id="upload" name="file" accept="image/*" type="file" style="
display
: none"/>

input:file event is an upload type
Die häufiger verwendeten Attribute haben die folgenden Werte:
accept: gibt die auswählbaren Datei-MIME-Typen an, die durch englische Kommas getrennt sind.
Um alle Bildformate zu unterstützen, schreiben Sie einfach *.
multiple: Ob mehrere Dateien ausgewählt werden können, ist der Wert der virtuelle Pfad der ersten Datei Der Stil ist unveränderlich. Um seinen Stil zu ändern, müssen Sie ihn zunächst ausblenden. display:none;

CSS-Teil:

Da wir einen kreisförmigen Avatar erstellen, definieren wir zuerst den Bildstil.

 #pic{
 width:100px;
 height:100px;
 border-radius:50% ;
 margin:20px auto;
 cursor: pointer;
 }

jQuery-Teil:

 $(function() {
 $("#pic").click(function () {
 $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
 $("#upload").on("change",function(){
 var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
 if (objUrl) {
 $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
 }
 });
 });
 });
 //建立一個可存取到該file的url
 function getObjectURL(file) {
 var url = null ;
 if (window.createObjectURL!=undefined) { // basic
 url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox)
 url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
 url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
 }

Die laufenden Ergebnisse sind wie folgt:

Ich glaube, Sie haben die Methode nach dem Lesen des Falles gemeistert In diesem Artikel ist es spannender. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Uploadify implementiert die Anzeige eines Fortschrittsbalkens zum Hochladen von Bildern

So erstellen Sie eine Menü-Link-Schaltfläche mit dem jQuery EasyUI-Plug-in

Das obige ist der detaillierte Inhalt vonImplementieren Sie jquery, um Bilder vor dem Hochladen lokal in der Vorschau anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!