尝试在 HTML 页面加载时读取本地文件

Question

我正在创建一个引用本地 txt（或 csv）文件的 Web 应用程序，该文件每年都会更改。 我希望能够在页面启动时将文件内容加载到<textarea> 。

现在，我有使用<input>元素将内容加载到<textarea>的功能代码（感谢 2015 年的上一个 StackOverflow 问题）。 文件被选中，一旦输入状态改变，事件侦听器将调用一个函数。 我的挑战是修改代码，以便文件可以被硬编码并在启动时加载，并且仍然使用事件调用函数（或更改函数以在没有事件调用的情况下工作）。

索引.html

    <input type="file" id="fileinput" />
    <script type="text/javascript" src="dataLoad.js"></script>
    <script type="text/javascript">
    document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
    </script>
    <textarea rows=20 id="area"></textarea>

数据加载.js

function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 
    if (f) {
        var r = new FileReader();
        r.onload = function(e) {
          var display = "";
          //a lot of unimportant stuff here
          document.getElementById('area').value = display;
        }

        r.readAsText(f);

    } else { 
        alert("Failed to load file");
    }
}

这工作正常，但我不想手动选择要加载的文件，我想对文件进行硬编码。 “这里有很多不重要的东西”解析文件中的数据，所以为了清楚起见，我把它省略了。

Answer 1

出于安全原因，您不能。

您不希望您访问的网站能够执行此操作，对吗？

尝试这个：

 <object width="300" height="300" type="text/plain" data="password.txt" border="0" >
</object

Answer 2

假设<input type="file" />有autocomplete功能（我相信默认情况下会这样），任何被选择/拖到元素上的文件都应该在页面加载时仍然存在，所以你需要做的就是手动触发您eventListener添加了eventListener的change事件，如下所示：

<input type="file" id="fileinput" />
<textarea rows=20 id="area"></textarea>

<script>
    var fileInput = document.getElementById('fileinput');
    var event     = new Event('change');

    fileInput.addEventListener('change', readSingleFile, false);

    fileInput.dispatchEvent(event);

    function readSingleFile(evt) {
        var f = evt.target.files[0];

        if (f) {
            alert("Processing file...");
        }
    }
</script>

这在 JSFiddle 中不起作用，因为它会在您刷新页面时重建 HTML，但是这对我来说是离线工作的。