In this article I will explain how to preview image before upload using FileUpload control in ASP.Net using jQuery, CSS and HTML5.
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.
<input id="fileupload" type="file" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</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.
 
<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
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads