In this article I will explain how to display image immediately after file is selected in FileUpload control using jQuery, CSS and HTML5.
The image is shown immediately after file is selected using the DXImageTransform filter CSS property in browsers that do not support HTML5 i.e. Internet Explorer 8 and 9.
While for the browsers that support HTML5 i.e. Internet Explorer 10 and 11+, Mozilla FireFox, Google Chrome and Opera, the image is displayed using HTML5 FileReader API.
HTML Markup
The HTML Markup consists of an HTML FileUpload control and a DIV which will be used for displaying live preview.
<input id="fileupload" type="file" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>
Client Side Implementation for displaying Image immediately after file is selected
Firstly we need to check whether the file is a valid image file.
Then we need to determine the browser and its version as based on that we need to select the appropriate way to display the image preview before upload.
Case1: Browsers not supporting HTML5 i.e. Internet Explorer 8 and 9
For browsers that do not support HTML5 and support DXImageTransform filter CSS, the DXImageTransform filter is applied to the DIV and the path of the file is set from the FileUpload control.
Case2: Browsers supporting HTML5 i.e. Internet Explorer 10 and 11+, FireFox, Chrome and Opera
For browsers that support HTML5 and also the HTML5 FileReader API, the File selected in the FileUpload control is read as BASE64 string using the readAsDataURL method and is displayed using an Image control.
Note: Though Apple Safari supports HTML5 it does not support HTML5 FileReader API and hence in such case there’s no possible way to display Image Preview before upload in Apple Safari.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(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") {
$("#dvPreview").show();
$("#dvPreview").append("<img />");
var reader = new FileReader();
reader.onload = function (e) {
$("#dvPreview img").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
CSS styles
<style type="text/css">
#dvPreview
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
min-height: 400px;
min-width: 400px;
display: none;
}
</style>
![Show (Display) image preview before upload using jQuery]()
The Internet Explorer 8 and 9 Security Issue
Internet Explorer 8 and 9 are built in with a security feature which prevents working of the live image preview when the application is hosted on server.
Due to the built in security feature, these browsers modify the image path from C:\Images\Mudassar.png to C:\FakePath\Mudassar.png. And hence the JavaScript is unable to locate the file.
The solution to this problem is to request the site visitors to add your domain in trusted sites list of Internet Explorer as show in the animated GIF below.
![Show (Display) image preview before upload using jQuery]()
Demo
Downloads
