Maison > Article > interface Web > jQuery implémente la fonction de prévisualisation lors du téléchargement d'images

jQuery implémente la fonction de prévisualisation lors du téléchargement d'images

php中世界最好的语言original: 2018-04-20 17:10:202086parcourir

Cette fois, je vous propose jQuery pour implémenter la fonction de prévisualisation lors du téléchargement de images Quelles sont les précautions pour que jQuery implémente la fonction de prévisualisation lors du téléchargement d'images. ? Voici les cas suivants. Jetons un coup d’œil à des cas pratiques.

<!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 pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Compilation de points de connaissances JS sujets aux erreurs

intercepteur axios

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!

php jquery JS

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：Compilation de points de connaissances JS sujets aux erreursArticle suivant：Compilation de points de connaissances JS sujets aux erreurs

Articles Liés

Voir plus