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

Last Reply on May 01, 2016 10:33 AM By power

Posted on Apr 25, 2016 02:02 AM

Hello, how do i browse image and preview on imagebutton within a gridview before upload

Posted on Apr 26, 2016 09:53 AM

Thank you for the reply. However, it didn't help me much. What I am trying to do is access the imagebutton control inside a gridview and show preview inside the gridview before upload.

Posted on Apr 27, 2016 09:55 AM Modified on on Sep 15, 2017 03:00 AM

Hi power,

I have created sample that full fill your requirement.


    <asp:GridView runat="server" AutoGenerateColumns="false" ID="gvPreview">
            <asp:BoundField DataField="Id" HeaderText="Id" />
            <asp:TemplateField HeaderText="Files">
                    <input id="fileupload" type="file" onchange="SetPreview(this)" />
                    <asp:ImageButton ID="btnImage" runat="server" Height="100" Width="100" Style="display: none"
                        CssClass="ImageButton" />
    <style type="text/css">
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            min-height: 30px;
            min-width: 30px;
            display: none;
    <script type="text/javascript" src=""></script>
    <script language="javascript" type="text/javascript">
        function SetPreview(ele) {
            var btnImage = $(ele).closest('tr').find('[id*=btnImage]');
            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)[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(ele).val();
                else {
                    if (typeof (FileReader) != "undefined") {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                    } else {
                        alert("This browser does not support FileReader.");
            } else {
                alert("Please upload a valid image file.");


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)) });
        gvPreview.DataSource = dt;


Posted on May 01, 2016 10:33 AM

Hi dharmendr, Brilliant! This is the solution I was looking for. Thank you so much.