jquery implémente la fonction de prévisualisation locale avant l'image upload_jquery

L'exemple de cet article partage avec vous le code spécifique de jquery pour prévisualiser les images avant de les télécharger pour votre référence. Le contenu spécifique est le suivant
. Il y a un petit problème avant l'introduction. Lorsque je ne trouve pas l'aperçu de l'image, la raison pour laquelle l'image ne s'affiche pas s'avère être le chemin de l'image ! ! ! Ce que je continue d'écrire, c'est le chemin local de l'image, qui ne sert à rien. Accédez directement au code.

partie html :

Copier le code Le code est le suivant :

c37e14a9dbb395c965097eeb90f9e646
aaa5dba3500e9331b106fc4c66fc936b

L'événement input:file est de type upload
Les valeurs d'attribut les plus couramment utilisées sont les suivantes :
accepter : indique les types MIME de fichiers qui peuvent être sélectionnés. Plusieurs types MIME sont séparés par des virgules anglaises. Les types MIME couramment utilisés sont indiqués dans le tableau ci-dessous.
Pour prendre en charge tous les formats d'image, écrivez simplement *.
multiple : Indique si plusieurs fichiers peuvent être sélectionnés. Lorsqu'il y a plusieurs fichiers, la valeur est le chemin virtuel du premier fichier

.

Le style de input:file est inchangé, donc si vous souhaitez changer son style, masquez-le d'abord. affichage : aucun ;

Partie CSS :
Parce que nous créons un avatar circulaire, nous définissons d'abord le style de l'image.

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

Partie jQuery :

 $(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 ;
 }

Les résultats en cours d'exécution sont les suivants :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre le programme jquery.