[英]Fire JavaScript from Upload Control Inside a Template Field in GridView ASP.net
I have gridview which contains a column containing a HTMLInput File Control (Upload Button), Also We have an image here, Here is the Code: 我有gridview,其中包含一列,其中包含一个HTMLInput File控件(上传按钮),这里也有一个图像,这是代码:
<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.
现在,我需要启动PreviewFile()javascript函数,该函数获取上传按钮和图像ID,然后执行某些操作。 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. 问题在这里,它无法检测到网格视图的项目模板内的Image2和Upload1控件。 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.
但是我无法传递正确的控件ID来使其正常工作。
What should I do? 我该怎么办?
I change Your onchange="previewFile()"
to onchange="previewFile(this)"
. 我将您的
onchange="previewFile()"
更改为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. 它将针对特定的控件(您单击的控件),并在
ItemTemplate
(单击的input type="file"
parentNode
)内部搜索第一个Image
控件。
aspx : 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 : 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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.