Maison > Article > interface Web > Comment implémenter l'aperçu local des images téléchargées par jQuery

Comment implémenter l'aperçu local des images téléchargées par jQuery

php中世界最好的语言original: 2018-05-26 11:16:591935parcourir

Cette fois, je vais vous montrer comment implémenter jQuerytélécharger image aperçu local, quelles sont les précautionspour réaliser un aperçu local des images téléchargées par jQuery, le Voici le combat réel. Jetons un coup d'œil au cas.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById('upload').files[0]);
  var f = document.getElementById('upload').files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById('preview').src = src
})
</script>
</body>
</html>

Effet opérationnel :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article , et il y aura des choses plus excitantes. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser vue2 pour implémenter la sélection du panier et de l'adresse

Comment utiliser Angular pour configurer le serveur Render

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!

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：Points d'entretien JS à noterArticle suivant：Points d'entretien JS à noter

Articles Liés

Voir plus