Simple Image Preview on Upload
Home
Snippets
Simple Image Preview on Upload
HTML
CSS
JS
<body> <h2>Upload and Preview an Image</h2> <input type="file" accept="image/*" onchange="previewImage(event)"> <div class="container" id="previewContainer">No image selected</div> </body>
body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif; margin: 0; } .container { margin-top: 20px; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; border: 2px dashed #888; border-radius: 10px; overflow: hidden; } img { max-width: 100%; max-height: 100%; }
function previewImage(event) { const file = event.target.files[0]; const previewContainer = document.getElementById('previewContainer'); if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = e => previewContainer.innerHTML = `<img src="${e.target.result}" alt="Preview">`; reader.readAsDataURL(file); } else { previewContainer.innerHTML = "File not supported"; } }
Ad #1
Ad #2
Scroll to Top