Implémentez jquery pour prévisualiser les images localement avant de les télécharger

Cette fois, je vais vous apporter les précautions pour implémenter jquery pour prévisualiser localement avant de télécharger des images, et implémenter jquery pour prévisualiser localement avant de télécharger des images. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 sort 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 :

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

l'événement input:file est un type de téléchargement
L'attribut le plus couramment utilisé a la valeur suivante :
accepter : indique les types de fichiers MIME 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 : Si plusieurs fichiers peuvent être sélectionnés Lorsqu'il y a plusieurs fichiers, la valeur est le chemin virtuel du premier fichier

Input:file. le style est immuable, donc pour changer son style, cachez-le d’abord. display:none;

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 d'exécution sont les suivants :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Uploadify implémente l'affichage d'une barre de progression pour télécharger des images

Comment créer un bouton de lien de menu avec le Plug-in jQuery EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!