jquery implementiert die lokale Vorschaufunktion vor dem Bild-Upload_jquery

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code von jquery mit, um Bilder vor dem Hochladen als Referenz anzuzeigen. Der spezifische Inhalt ist wie folgt
Vor der Einführung gibt es ein kleines Problem. 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:

Code kopieren Der Code lautet wie folgt:

c37e14a9dbb395c965097eeb90f9e646
96ff3649eda879c3b7ed50ebc3e0adaf

Das Ereignis „input:file“ ist vom Upload-Typ
Die am häufigsten verwendeten Attributwerte sind wie folgt:
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, wenn mehrere Dateien vorhanden sind, ist der Wert der virtuelle Pfad der ersten Datei

Der Stil von input:file bleibt unverändert. Wenn Sie also den Stil ändern möchten, blenden Sie ihn zuerst aus. 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 Laufergebnisse sind wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, das JQuery-Programm zu erlernen.