Maison > Article > interface Web > Comment afficher l'effet d'aperçu des images téléchargées dans les compétences Firefox_javascript compatibles js

Comment afficher l'effet d'aperçu des images téléchargées dans les compétences Firefox_javascript compatibles js

WBOYoriginal: 2016-05-16 15:58:021064parcourir

L'exemple de cet article décrit la méthode de Firefox compatible js pour afficher l'effet d'aperçu des images téléchargées. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=GBK" http-equiv="Content-Type" /> 
<title>Image preview example</title>
<style type="text/css">
 div {width:100px;height:100px;border: 1px #A3BFE7 solid;}
 img {width:atuo;height:atuo;}
</style> 
<script type="text/javascript"> 
 function viewPic() { 
 var oFReader = new FileReader();
 oFReader.onload = function(e) {
 document.getElementById("uploadPreview").src = e.target.result;
 }
 if (document.getElementById("uploadImage").files.length === 0) { 
 return;
 } 
 var oFile = document.getElementById("uploadImage").files[0];
 oFReader.readAsDataURL(oFile);
} 
</script> 
</head> 
<body>
<input id="uploadImage" type="file" name="myPhoto" 
onchange='viewPic();'/><br>
<img id="uploadPreview" src=""/>
</body> 
</html>

L'effet de l'opération est comme indiqué ci-dessous :

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode jQuery pour obtenir l'effet de rotation de nombres aléatoires_jqueryArticle suivant：Méthode jQuery pour obtenir l'effet de rotation de nombres aléatoires_jquery

Articles Liés

Voir plus