Image Preview Using File Upload Control

In this article I am going to explain how to use image preview using file upload control in asp.net. This can be done using client side Jquery.



Add following java script code in your head section.

//Image Preview Functions
function showimagepreview(input, PreviewImageID, ErrorSpanID) {
    //debugger;
    var rType = checkfile(input);
    if (rType == true) {
        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function (e) {
                $("[id$=" + PreviewImageID + "]").attr('src', e.target.result);
            }
            filerdr.readAsDataURL(input.files[0]);
        }
    }
    else {
        $(":file").filestyle('clear');
    }
    return rType;
}
 
function checkfile(input, ErrorSpanID) {
    //debugger;
    var file = getNameFromPath($("[id$=" + input.id + "]").val());
    if (file != null) {
        var extension = file.substr((file.lastIndexOf('.') + 1));
        switch (extension) {
            case 'jpg':
            case 'JPG':
            case 'png':
            case 'PNG':
            case 'gif':
            case 'GIF':
                flag = true;
                break;
            default:
                flag = false;
        }
    }
    if (flag == false) {
        $("[id$=" + ErrorSpanID + "]").text("You can upload only jpg,png,gif extension file");
        return false;
    }
    return flag;
}
 
function getNameFromPath(strFilepath) {
    var objRE = new RegExp(/([^\/\\]+)$/);
    var strName = objRE.exec(strFilepath);
    if (strName == null) {
        return null;
    }
    else {
        return strName[0];
    }
}
//End Image Preview Functions

File Upload Control Code
Add this code in your aspx file

<div class="form-group">
    <label class="control-label" for="<%=FUUserProfilePic.ClientID %>">Profile Picture</label><p><small>(the user will have access to private merchants and categories in these agencies)</small></p>
    <asp:fileupload id="FUUserProfilePic" cssclass="filestyle" data-buttonname="btn-primary" onchange="showimagepreview(this,'Imageprw','ErrorProfilePic')" runat="server">
 
</asp:fileupload></div>
<div class="form-group">
    <p>
        <asp:image id="Imageprw" imageurl="~/images/user_default.png" height="100" runat="server">
        <span id="ErrorProfilePic" style="color: red;"></span>
    </asp:image></p>                                   
</div>