文件输入 - 无法获取未定义或空引用的属性“addEventListener”

Question

我有一个输入文件控件，我想用它来选择一个 .csv 文件。我一直在尝试向控件添加事件侦听器，以便在选择文件时调用函数“csvFileSelected”。 但是，每当我的应用尝试添加事件侦听器时，都会抛出错误：

0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“addEventListener”

我的 javascript 文件如下所示：

function bindEvents() {
$(document).ready(function () {
    document.getElementById("uploadCSVFile").addEventListener('change', csvFileSelected, false);
});

}

function csvFileSelected()
{
    // Get CSV file and store in a hidden field
    var csvFile = document.getElementById("uploadCSVFile").files[0];
}

这是我的 HTML 代码：

<div class="panel panel-info">
            <div class="panel-heading text-center" style="font-weight: bold;">Bulk Invite</div>
            <div class="panel-body">
                <div class="form-group">
                    <div class="row" style="text-align: center;">
                        <div class="col-xs-12 col-md-offset-3 col-md-3" style="font-weight: bold; padding-top: 15px">
                            Import Users From .CSV File:  
                        </div>
                        <div class="col-xs-12 col-md-3" style="padding-left: 50px;">
                            <div id="csvBtn" class="btn btn-default fileUpload" runat="server">
                                Select File
                                <input id="uploadCSVFile" class="upload" type="file" accept=".csv" runat="server" />
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-3">
                            <asp:Label ID="fileName" runat="server" Text=""></asp:Label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

在我的 HTML 页面上，我有这个放在 HTML 元素之后的脚本：

        <script type="text/javascript">
            // called at the start of page load
            $(document).ready(function () {
                bindEvents();
            });
        </script>

我已经为这个错误尝试了许多可能的解决方案，但是没有一个对我有用。

我已确保将脚本放置在 HTML 页面的底部，并将其封装在 $(document).ready 中，因此在加载 HTML 之前不应添加侦听器，但这不起作用。

我也尝试过使用：

window.onload = 函数(){

document.addEventListener('DOMContentLoaded', function () {

我还使用了 JQuery 语句来添加事件侦听器，并且我尝试使用不同的元素，但仍然抛出相同的错误。

在我看来，这些函数似乎在文档/页面准备好之前就被调用了。

任何帮助将不胜感激。

Answer 1

问题在于您告诉服务器在服务器级别而不是客户端级别进行文件选择输入。

这意味着服务器实际上会在服务器端生成元素，并认为它只存在于那里。

通过删除runat="server"，您将能够使用Javascript（客户端）与该元素交互

我还将 jQuery 标头添加到 HTML 的顶部，并将其放入代码片段中（通过单击一张纸上看起来像 < > 的小图标）。

需要改变的是：

<input id="uploadCSVFile" class="upload" type="file" accept=".csv"/>

并添加以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

它应该可以正常工作。

function bindEvents() {
  $(document).ready(function() {
    document.getElementById("uploadCSVFile").addEventListener('change', csvFileSelected, false);
  });

}

function csvFileSelected() {
  // Get CSV file and store in a hidden field
  var csvFile = document.getElementById("uploadCSVFile").files[0];
  console.log(csvFile);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel panel-info">
  <div class="panel-heading text-center" style="font-weight: bold;">Bulk Invite</div>
  <div class="panel-body">
    <div class="form-group">
      <div class="row" style="text-align: center;">
        <div class="col-xs-12 col-md-offset-3 col-md-3" style="font-weight: bold; padding-top: 15px">
          Import Users From .CSV File:
        </div>
        <div class="col-xs-12 col-md-3" style="padding-left: 50px;">
          <div id="csvBtn" class="btn btn-default fileUpload" runat="server">
            Select File
            <input id="uploadCSVFile" class="upload" type="file" accept=".csv"/>
          </div>
        </div>
        <div class="col-xs-12 col-md-3">
          <asp:Label ID="fileName" runat="server" Text=""></asp:Label>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  // called at the start of page load
  $(document).ready(function() {
    bindEvents();
  });
</script>