I have gridview which contains a column containing a HTMLInput File Control (Upload Button), Also We have an image here, Here is the Code:

<ItemTemplate>
     <input id="Upload1" type="file" name="file" onchange="previewFile()" runat="server" accept="image/*" />
     <asp:Image ID="Image2" runat="server" Height="100px" Width="100px" />
</ItemTemplate>

After running website we have something like this:

New Item Template in Each Row

As you can see there an Item Template with those controls in each row. Now I need to fire previewFile() javascript function which gets upload button and image ID and then will do something. Here is the code:

        function previewFile() {
            var preview = document.querySelector('#<%=Image2.ClientID %>');
            var file = document.querySelector('#<%=Upload1.ClientID %>').files[0];}

The problem is here, It can not detect Image2 and Upload1 Controls inside Item Template of Grid View. I need to get the image path of selected picture with upload control and show it in image control in client side using this script. But I can not pass correct Control IDs to get it to work.

What should I do?

Related posts

Recent Viewed