Comment implémenter l'aperçu local des images téléchargées par jQuery-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-26 11:16:59

original

1925 Les gens l'ont consulté

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>

Copier après la connexion

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!