Show Display image preview before upload using jQuery

In this article I will explain how to show image preview in a DIV before the image is actually uploaded to server using jQuery.

The live preview is shown 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 preview 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.

<hr />

<b>Live Preview</b>

<br />

</div>

Client Side Implementation for displaying live preview of image before upload

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.

$(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

#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.