AspBucket offers ASP.NET, C#, VB, Jquery, CSS, Ajax, SQL tutorials. It is the best place for programmers to learn

Friday, 18 December 2015

Image Preview Using File Upload Control

In this article I am going to explain how to use image preview using file upload control in 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) {
    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',;
    else {
    return rType;
function checkfile(input, ErrorSpanID) {
    var file = getNameFromPath($("[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;
                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">
<div class="form-group">
        <asp:image id="Imageprw" imageurl="~/images/user_default.png" height="100" runat="server">
        <span id="ErrorProfilePic" style="color: red;"></span>


Post a Comment

  • Popular Posts
  • Comments