How to preview selected image in HTML form
Hello Developers,
In this tutorial, I will cover a fascinating topic. Sometimes developers want to show the selected image while selecting from the HTML form. For that, I have written a short javascript code. Let's discuss this.
In the HTML form, we can write an input field of the file type to submit an image from the HTML form. Here I use bootstrap, That's why the HTML part code looks like this:
<div class="row">
<div class="form-group">
<label for="Picture" class="col-sm-2 col-form-label">Picture</label>
<div class="col-sm-4 pb-2">
<input type="file" class="form-control" name="image" id="fileupload" placeholder="Picture" required>
</div>
<div class="col-sm-2">
<img class="img-fluid" id="user_image" src="./no_img.jpg" height="100" width="100">
</div>
<div class="col-sm-4">
<div id="dvPreview"></div>
</div>
</div>
</div>
We show the 'No Image', which is just a blank image. Also, we have taken a <div></div>. The div can be handled by dvPreview id. The main show is just beginning. Import jquery to write some code:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
Initially, we make the <div id="dvPreview"></div> empty by:
$("#dvPreview").html("");
Then, we have to check whether the selected element is an image or not, and also put the image in that <div id="dvPreview"></div> by the below code:
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#dvPreview").show();
$("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =
$(this).val();
}
}
Otherwise we have shown the sample 'No Image' image and hide the <div id="user_image"></div> by the below code:
if (typeof(FileReader) != "undefined") {
$("#user_image").hide();
$("#dvPreview").show();
$("#dvPreview").append("<img />");
var reader = new FileReader();
reader.onload = function(e) {
$("#dvPreview img").attr("src", e.target.result).css({
'height': '100px',
'width': '100px'
});
}
reader.readAsDataURL($(this)[0].files[0]);
}
If we compile the if conditions, then the script looks like this:
$(function() {
$("#fileupload").change(function() {
$("#dvPreview").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#dvPreview").show();
$("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =
$(this).val();
} else {
if (typeof(FileReader) != "undefined") {
$("#user_image").hide();
$("#dvPreview").show();
$("#dvPreview").append("<img />");
var reader = new FileReader();
reader.onload = function(e) {
$("#dvPreview img").attr("src", e.target.result).css({
'height': '100px',
'width': '100px'
});
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
$("#user_image").show();
alert("This browser does not support FileReader.");
}
}
} else {
$("#user_image").show();
alert("Please upload a valid image file.");
}
});
});
The full code with the HTML part is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image preview while selecting from form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h3>Image preview while selecting from HTML form</h3>
<div class="row">
<div class="form-group">
<label for="Picture" class="col-sm-2 col-form-label">Picture</label>
<div class="col-sm-4 pb-2">
<input type="file" class="form-control" name="image" id="fileupload" placeholder="Picture" required>
</div>
<div class="col-sm-2">
<img class="img-fluid" id="user_image" src="./no_img.jpg" height="100" width="100">
</div>
<div class="col-sm-4">
<div id="dvPreview"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script>
$(function() {
$("#fileupload").change(function() {
$("#dvPreview").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#dvPreview").show();
$("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =
$(this).val();
} else {
if (typeof(FileReader) != "undefined") {
$("#user_image").hide();
$("#dvPreview").show();
$("#dvPreview").append("<img />");
var reader = new FileReader();
reader.onload = function(e) {
$("#dvPreview img").attr("src", e.target.result).css({
'height': '100px',
'width': '100px'
});
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
$("#user_image").show();
alert("This browser does not support FileReader.");
}
}
} else {
$("#user_image").show();
alert("Please upload a valid image file.");
}
});
});
</script>
</body>
</html>
By the above process, you can definitely solve the problem to show an image preview while selecting the file in HTML form. Hope this might help in the journey of development.
Github source of the above code: Github Source
Read More: How to read multiple query stored procedure from mssql to Laravel project
K. M. Shawkat Zamil
Senior Software Engineer
I am a Senior Software Engineer in a reputed company in Bangladesh. I am a big fan of Laravel, PHP Programming, MSSQL Server, MySql, JavaScript, and lots more. I love to help people who are especially eager to learn. I believe in patience and motivation.