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

Question

I'm creating a web application that references a local txt (or csv) file which will change every year. I want to be able to load the contents of the file into a <textarea> on page startup.

Right now, I have functional code for loading the contents into a <textarea> by using the <input> element (thanks to a previous StackOverflow question in 2015). The file is selected and an event listener will call a function once the input state gets changed. My challenge is modifying the code so that the file can be hard-coded and loaded on startup and still calling the function using an event (or changing the function to work without an event call).

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

dataLoad.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");
    }
}

This works fine, but I don't want to manually select the file to load, I want to hard-code the file. The "a lot of unimportant stuff here" parses the data in the file so I left it out for clarity sake.

Answer 1

You cannot due to security reasons.

You don't want the websites you visit to be able to do this, do you?

Try This:

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

Answer 2

Assuming the <input type="file" /> has autocomplete on (which I believe it does by default), any files that were chosen/dragged onto the element should still be present on page load, so all you would need to do is manually trigger the change event that you added an eventListener for, like so:

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

This won't work in JSFiddle as it rebuilds the HTML when you refresh the page, however this works offline for me.