从 GridView ASP.net 中的模板字段内的上传控件触发 JavaScript

Question

我有一个 gridview，其中包含一个包含 HTMLInput 文件控件（上传按钮）的列，我们这里还有一个图像，这里是代码：

   <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 以使其正常工作。

我该怎么办？

Answer 1

我将您的 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';
        }