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

Question

我有一个输入文件控件，我想将其用于 select .csv 文件。我一直在尝试向控件添加事件侦听器，以便在文件 selected 时调用函数 'csvFileSelected'。但是，每当我的应用程序尝试添加事件侦听器时，都会抛出一个错误：

0x800a138f - JavaScript runtime error: Unable to get property 'addEventListener' of undefined or null reference

我的 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>

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

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

我也试过使用：

window.onload = function(){

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

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

在我看来，这些函数甚至在 document/page 准备就绪之前就已经被调用了。

如有任何帮助，我们将不胜感激。

Answer 1

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

这意味着服务器将实际生成元素 server-side，并认为它只存在于此。

通过删除 runat="server"，您将能够使用 Javascript（客户端）

与该元素交互

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

需要修改的是：

<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>

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

File Input - Unable to get property 'addEventListener' of undefined or null reference

html

javascript

dom

getelementbyid

addeventlistener

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

File Input - Unable to get property 'addEventListener' of undefined or null reference

html

javascript

dom

getelementbyid

addeventlistener

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