Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to preview an image before it is uploaded in JavaScript?
In JavaScript, you can preview an image before uploading using the FileReader API. This allows users to see their selected image immediately without needing to upload it to a server first.
How FileReader Works
The FileReader API reads file contents asynchronously. For image preview, we use readAsDataURL() which converts the image file into a base64 data URL that can be displayed in an <img> element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview Example</title>
<style>
#chooseImage {
max-width: 300px;
max-height: 300px;
margin: 10px 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Select an Image to Preview</h2>
<input type="file" id="yourImage" accept="image/*" />
<br>
<img id="chooseImage" src="#" alt="Selected image will appear here" style="display:none;" />
<script>
function readImage(fileInput) {
if (fileInput.files && fileInput.files[0]) {
var fileReader = new FileReader();
fileReader.onload = function(event) {
var imageElement = document.getElementById('chooseImage');
imageElement.src = event.target.result;
imageElement.style.display = 'block';
}
fileReader.readAsDataURL(fileInput.files[0]);
}
}
document.getElementById("yourImage").addEventListener("change", function() {
readImage(this);
});
</script>
</body>
</html>
Key Components
File Input: The <input type="file"> element with accept="image/*" restricts selection to image files only.
FileReader Object: Created with new FileReader() to handle file reading operations.
onload Event: Triggers when the file is successfully read, providing access to the file data through event.target.result.
Vanilla JavaScript Version
Here's a more modern approach using vanilla JavaScript without jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview - Modern Version</title>
</head>
<body>
<input type="file" id="imageInput" accept="image/*">
<div id="preview"></div>
<script>
const imageInput = document.getElementById('imageInput');
const preview = document.getElementById('preview');
imageInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}" style="max-width: 300px; max-height: 300px;">`;
};
reader.readAsDataURL(file);
} else {
preview.innerHTML = '';
}
});
</script>
</body>
</html>
Browser Support
The FileReader API is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's been available since Internet Explorer 10.
Conclusion
Using FileReader with readAsDataURL() provides an efficient way to preview images before upload. This enhances user experience by giving immediate visual feedback without server communication.
367 Views
