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>
 

 

Results 1 - 5 of 8 12
Posted on May 05, 2016 02:06 AM

Please explain in details. If the file upload is outside the gridview then where you want to show the preview.


Posted on May 05, 2016 07:26 AM

I want to show the preview in the imagebutton,  inside the gridview but the fileupload control should be outside the gridview.


Posted on May 05, 2016 09:09 AM Modified on on May 05, 2016 09:12 AM

For every row you want to display the same image for the image button that you select from the file upload control?

 

 


Posted on May 05, 2016 09:51 AM

I am using two fileuploades, which work independently and I am using them to update images in database. Also I have two gridviews and I am trying to link one gridview to one fileupload only. I just don't want the fileupload to be inside gridview. 


Posted on May 05, 2016 09:57 AM Modified on on May 05, 2016 10:05 AM

If you are just updating data in database then why are you showing preview, you can directly update the file to db. If you want to show then show out side the gridview.