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>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='<%# Bind("IsfileUplo") %>'>
<div>
<table>
<tr>
<td>
<input id="Upload1" type="file" name="file" onchange="javascript:previewFile(this)" runat="server" accept="image/*" />
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>
<asp:Image ID="Image2" runat="server" Height="100px" Width="100px" />
</td>
<td>
<asp:Label ID="Label5" runat="server" Text="" Width="120px"></asp:Label>
</td>
</tr>
</table>
</div>
</ItemTemplate>
After running website we have something like this:
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?
I change Your onchange="previewFile()"
to onchange="previewFile(this)"
. It will target specific control (which You clicked) and search inside ItemTemplate
( parentNode
of clicked input type="file"
) for first Image
control.
aspx :
<ItemTemplate>
<input id="Upload1" type="file" name="file" onchange="previewFile(this)" runat="server" accept="image/*" />
<asp:Image ID="Image2" runat="server" Height="100px" Width="100px" />
</ItemTemplate>
js :
function previewFile(ele) {
var fl = ele.files[0]; //get selected file
var img = ele.parentNode.getElementsByTagName('img')[0]; //get 1st image control in ItemTemplate where is Your input file is.
img.src = window.URL.createObjectURL(fl); //preview image without uploading
}
btw. This is just previewing selected image. It's not uploaded.
Updated : (new code adapted to changed question)
function previewme(ele) {
var fl = ele.files[0];
var placeHolder = ele.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
var div = placeHolder.getElementsByTagName('div')[1];
var tbl = div.getElementsByTagName('table')[0];
var img = tbl.rows[0].cells[0].getElementsByTagName('img')[0];
var lbl = tbl.rows[0].cells[1].getElementsByTagName('span')[0];
img.src = window.URL.createObjectURL(fl);
lbl.innerHTML = 'File choosed';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.