jQuery implémente la fonction de prévisualisation des fichiers image avant le téléchargement

Si vous voulez réaliser un bon travail, vous devez le rendre parfait. Par exemple, en utilisant jQuery pour implémenter la fonction de téléchargement d'image, pouvons-nous le prévisualiser avant de le télécharger ? Cet article partage principalement avec vous un exemple simple de la fonction de prévisualisation du fichier image jQuery avant le téléchargement. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. J'espère qu'après l'avoir appris, vous pourrez utiliser jQuery pour implémenter la fonction de prévisualisation des fichiers image avant de les télécharger.

1. Préparez d'abord un événement déclencheur p

onchange

<input type="file" onchange="preview(this)" ></span>
<p id="preview"></p>

2 Écrivez du code JS

//上传图片之前预览图片
function preview(file){
if (file.files && file.files[0]){ 
var reader = new FileReader(); 
reader.onload = function(evt){ 
$("#preview").html('<img src="&#39; + evt.target.result + &#39;" width="95px" height="50px" />'); 
} 
reader.readAsDataURL(file.files[0]); 
}else{
$("#preview").html('<p style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\&#39;&#39; + file.value + &#39;\&#39;"></p>'); 
} 
}

L'avez-vous maîtrisé ? C'est une bonne technique jQuery, tout le monde devrait l'essayer rapidement.

Recommandations associées :

Code d'implémentation de téléchargement de fichier image PHP

exemple d'implémentation php+ajax de la fonction de téléchargement de fichier image_PHP

Exemple d'implémentation Javascript d'une méthode de téléchargement d'images asynchrone

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!