Show preview in gridview and fileupload is outside gridview

Last Reply on May 06, 2016 05:50 AM By power

Posted on May 05, 2016 01:44 AM

Hi, recently dharmendr gave me the solution shown below and it worked perfect, however, in this example the fileupload input is inside the gridview. Can you please tweak this example where the Fileupload is actually outside of the gridview. Thank you.

<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>
 

 

You are viewing reply posted by: power on May 06, 2016 05:50 AM.
Posted on May 06, 2016 05:50 AM

You are a good person. It works. Thank you.