recherche

Maison >interface Web >js tutoriel >jQuery HTML5 implémente l'effet d'aperçu de l'image avant de télécharger_jquery

jQuery HTML5 implémente l'effet d'aperçu de l'image avant de télécharger_jquery

WBOY
WBOYoriginal
2016-05-16 15:43:532019parcourir

L'exemple de cet article décrit l'implémentation jQuery HTML5 de l'aperçu de l'image avant le téléchargement. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, nous utilisons principalement l'API File de HTML5 pour créer une URL pouvant accéder au fichier, une balise img vide avec l'ID img0 et afficher le fichier sélectionné dans la balise img pour implémenter la fonction d'aperçu de l'image. Veuillez choisir un navigateur prenant en charge l'API HTML, tel que Google Chrome et Firefox.

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

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script> 
$("#file0").change(function(){
 var objUrl = getObjectURL(this.files[0]) ;
 console.log("objUrl = "+objUrl) ;
 if (objUrl) {
  $("#img0").attr("src", objUrl) ;
 }
}) ;
//建立一個可存取到該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 ;
}
</script>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery 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：Version Web jQuery du code source du jeu Brick Breaker Sharing_jqueryArticle suivant：Version Web jQuery du code source du jeu Brick Breaker Sharing_jquery

Articles Liés

Voir plus