Displaying an image preview enhances the user’s experience in modern web forms. With jQuery Image Preview Before Upload, users can get an instant look at their chosen image before it is sent to the server. In addition to this being a great feature for preventing uploading of the wrong image, it can make your interface interactive and more intuitive.
Imagine you are working on a form for uploading profiles. Instead of waiting until the submission to see your picture, you get an instant preview. That is just what this jQuery technique offers: a faster, more user-friendly, and efficient approach towards image uploads.
Showing Image Preview with jQuery
Let’s take a simple example to show preview of image before upload using jQuery or on selected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preview Selected Image Before Upload with jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-light">
<div class="container py-5">
<div class="card shadow-sm p-4">
<h3 class="mb-4 text-center">Preview Image Before Upload in jQuery</h3>
<input type="file" id="imageInput" class="form-control mb-3">
<div class="text-center">
<img id="previewImage" src="#" alt="Image Preview" class="img-fluid rounded d-none" style="max-height: 250px;">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#imageInput').change(function(){
let reader = new FileReader()
reader.onload = function(e){
$('#previewImage').attr('src', e.target.result).removeClass('d-none')
}
reader.readAsDataURL(this.files[0])
})
})
</script>
</body>
</html>Here, we have used jQuery change event to check image is selected or removed. It will show similar output to your browser.
It displays the selected image right after choosing it from your system. It’s ideal for use cases like uploading profile photos, product images, or cover banners where we need to show preview how it looks on webpage.
Multiple Image Preview Using jQuery
Now, let’s take this example a step further. For cases like you want to upload multiple images and show preview to user. With jQuery, you can easily display all selected images as previews before the upload happens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple Image Preview with jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-light">
<div class="container py-5">
<div class="card shadow-sm p-4">
<h3 class="mb-4 text-center">Preview Multiple Images Before Upload Using jQuery</h3>
<input type="file" id="multipleImageInput" class="form-control mb-3" multiple>
<div id="imagePreviewContainer" class="d-flex flex-wrap gap-3"></div>
</div>
</div>
<script>
$(document).ready(function(){
$('#multipleImageInput').change(function(){
$('#imagePreviewContainer').empty()
let files = this.files
for(let i=0; i<files.length; i++){
let reader = new FileReader()
reader.onload = function(e){
let img = $('<img>').attr('src', e.target.result).addClass('img-thumbnail rounded').css({'width':'150px','height':'150px'})
$('#imagePreviewContainer').append(img)
}
reader.readAsDataURL(files[i])
}
})
})
</script>
</body>
</html>In above example, core logic to display uploaded images stays same but we have added additional feature like showing multiple images.
It’s a perfect example for galleries, portfolio uploads, or e-commerce platforms where users upload multiple product images. It offers a fast, visual confirmation before final submission.
Conclusion
An additional feature in jQuery for image preview before upload gives users much more control and confidence in choosing images. It is quite simple, good-looking, and enhances the overall usability of any web form when implemented. Be it single or multiple image upload, this approach ensures that users always know what they are submitting. To know more upload storing uploaded file, you can checkout our post on : Implement File Upload Feature with jQuery and AJAX.