Maison > Article > interface Web > Utilisez jQuery pour prévisualiser les images localement lors de leur téléchargement

Utilisez jQuery pour prévisualiser les images localement lors de leur téléchargement

php中世界最好的语言original: 2018-05-03 09:12:531380parcourir

Cette fois, je vais d'abord vous apporter l'aperçu localement lors du téléchargement des images à l'aide de jQuery. Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

Effet opérationnel :

<!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>

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 :

Méthodes permettant au contrôle element-ui de faire fonctionner iview

Quelles sont les méthodes permettant aux composants parents de vue d'appeler sub -composants

Comment utiliser l'algorithme diff

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：Quels sont les points de confusion lors de l’utilisation de JS ?Article suivant：Quels sont les points de confusion lors de l’utilisation de JS ?

Articles Liés

Voir plus