recherche

Maison >interface Web >js tutoriel >Comment implémenter la fonction de prévisualisation d'image via js [avec exemple de code] compétences _javascript

Comment implémenter la fonction de prévisualisation d'image via js [avec exemple de code] compétences _javascript

WBOY
WBOYoriginal
2016-05-16 15:07:131281parcourir

Code d'implémentation : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>

Aperçu de l'effet

Rendu :

L'article ci-dessus sur la façon d'implémenter la fonction d'aperçu d'image via js [avec un exemple de code] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.

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：Une utilisation incorrecte de var en javascript provoque des astuces undefined_javascriptArticle suivant：Une utilisation incorrecte de var en javascript provoque des astuces undefined_javascript

Articles Liés

Voir plus