L'exemple de cet article décrit la méthode d'implémentation de l'aperçu d'image en js. J'en ai déjà écrit un. Le code est relativement simple et j'aimerais le partager avec vous pour votre référence. Les détails sont les suivants :
1. Aperçu de l'effet
Rendu :
2.Code d'implémentation :
<html>
<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>J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.
Les huit fonctions les plus couramment utilisées dans Excel
Comment arrondir dans Matlab
Quels sont les serveurs web ?
La différence entre les pages Web statiques et les pages Web dynamiques
Quel est le rôle du serveur sip
Comment résoudre le problème selon lequel document.cookie ne peut pas être obtenu
Comment ouvrir le fichier iso
Comment commenter le code en HTML
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
