Question

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

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

我的javascript文件如下：

char

这是我的HTML代码：

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页面上，我有一个放在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页面的底部，并将其包含在$（document）.ready中，这样在HTML加载之前不应添加监听器，但这不起作用。

我也尝试过使用：

window.onload = function（）{

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>

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

1 个答案: