從GridView ASP.net的模板字段內的上載控件中觸發JavaScript

Question

我有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來使其正常工作。

我該怎么辦？

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';
        }