Hellow Reader's ,
In this blog we are going to explain how to show image thumbnail before image upload.In many web application we need to show image thumbnail before uploading.
It will work on every browser which support HTML5 File API and JavaScript
Let’s start with HTML for single file show thumbnail.
Create HTML field in your Page.You can select only 1 file at a time.
<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />
JavaScript code to show image thumbnails
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
////FileReader is an API of HTML5 used to interact local files. Example of its capabilities, the FileReader API could be used to create a thumbnail preview of images as theyre being sent to the server.
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
</script>
Complete Code
<html>
<body>
<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />
</body>
</html>
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
</script>
If you face any issue in its configuration please feel free to comment.
0 Comment(s)