Display Image after selected selecting file name in HTML Input FileUpload

In this article I will explain with an example, how to display after the file is selected (selecting file name) in HTML Input FileUpload.

The image will be displayed directly from the HTML Input FileUpload using the DXImageTransform filter CSS property and 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>

Display Image after selected (selecting file name) in HTML Input FileUpload

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.