Il s'agit d'une visionneuse d'images très simple qui s'exécute dans le navigateur Web. Il utilise un seul fichier .html et 36 lignes de code. Enregistrez le code sous index.html - cliquer sur ce fichier ouvrira une fenêtre dans votre navigateur vous permettant de choisir une image de votre PC à afficher. J'ai pu ouvrir une image 1024 x 1024 - sympa.
Voici le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Viewer</title>
<style>
body {
background-color: #f0f0f0;
text-align: center;
font-family: Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
border: 2px solid #000;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Simple Image Viewer</h1>
<input type="file" id="fileInput" accept="image/*">
<img id="imageViewer" src="#" alt="Your image will appear here.">
<script>
const fileInput = document.getElementById('fileInput');
const imageViewer = document.getElementById('imageViewer');
fileInput.addEventListener('change', function() {
const file = this.files[0];
const url = URL.createObjectURL(file);
imageViewer.src = url;
});
</script>
</body>
</html>
Ben Santora - Octobre 2024
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!
Tutoriel d'utilisation de Kindeditor
Trouver des fichiers rapidement
La différence entre Javac et Java
Quels sont les outils d'attaque DDoS ?
Comment ouvrir les fichiers psd
Formules de permutation et de combinaison couramment utilisées
La différence entre les fichiers d'en-tête et les fichiers source
Dernières cotations Bitcoin
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
