Show uploaded image preview in GridView using jQuery in ASP.Net

Hi power,

I have created sample that full fill your requirement.

HTML

<div>
    <asp:GridView runat="server" AutoGenerateColumns="false" ID="gvPreview">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" />
            <asp:TemplateField HeaderText="Files">
                <ItemTemplate>
                    <input id="fileupload" type="file" onchange="SetPreview(this)" />
                    <asp:ImageButton ID="btnImage" runat="server" Height="100" Width="100" Style="display: none"
                        CssClass="ImageButton" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<div>
    <style type="text/css">
        .ImageButton
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            min-height: 30px;
            min-width: 30px;
            display: none;
        }
    </style>
    <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 SetPreview(ele) {
            var btnImage = $(ele).closest('tr').find('[id*=btnImage]');
            $(btnImage).removeAttr("src");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            if (regex.test($(ele).val().toLowerCase())) {
                if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                    $(btnImage).show();
                    $(btnImage)[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(ele).val();
                }
                else {
                    if (typeof (FileReader) != "undefined") {
                        $(btnImage).show();
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $(btnImage).attr("src", e.target.result);
                        }
                        reader.readAsDataURL($(ele)[0].files[0]);
                    } else {
                        alert("This browser does not support FileReader.");
                    }
                }
            } else {
                alert("Please upload a valid image file.");
            }
        };
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Id", typeof(int)) });
        dt.Rows.Add(1);
        dt.Rows.Add(2);
        dt.Rows.Add(3);
        dt.Rows.Add(4);
        gvPreview.DataSource = dt;
        gvPreview.DataBind();
    }
}

Screenshot