[英]How to upload multiple files simultaneously from inside GridView of ASP.NET Web Forms using JavaScript/jQuery?
[英]Fire JavaScript from Upload Control Inside a Template Field in GridView ASP.net
我有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>
在运行网站后,我们会看到以下内容:
如您所见,每行都有一个带有这些控件的项目模板。 现在,我需要启动PreviewFile()javascript函数,该函数获取上传按钮和图像ID,然后执行某些操作。 这是代码:
function previewFile() {
var preview = document.querySelector('#<%=Image2.ClientID %>');
var file = document.querySelector('#<%=Upload1.ClientID %>').files[0];}
问题在这里,它无法检测到网格视图的项目模板内的Image2和Upload1控件。 我需要使用上载控件获取所选图片的图像路径,并使用此脚本在客户端的图像控件中显示它。 但是我无法传递正确的控件ID来使其正常工作。
我该怎么办?
我将您的onchange="previewFile()"
更改为onchange="previewFile(this)"
。 它将针对特定的控件(您单击的控件),并在ItemTemplate
(单击的input type="file"
parentNode
)内部搜索第一个Image
控件。
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
}
顺便说一句 这只是预览选定的图像。 尚未上传。
更新日期 :(新代码适用于已更改的问题)
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.