Parse a local file to an array using JavaScript

I am trying to read a local file and have each line as an index in an array using JavaScript. I have been searching for the past 20 minutes and either I'm stupid or there really isn't an answer that pertains to my problem (...but it's probably the former :P). I am really new to JavaScript so if you have an answer could you please ment the code just to I know what's going on?

Also, from the searching I've done on the internet some people said JavaScript can't read local file for security reasons so if that is correct is there another language I can use? I'm a bit familiar with PHP if that is an option, which I doubt it is.

EDIT

As per thg435's question, I'll explain what I am trying to acplish.

My project is to analyze a BUNCH of water quality data that has been collected by the Ontario gov't (which I've done) and display it in some way. I have chosen to display it on a webpage using the Google Maps API. I currently have a file of chemicals that were found. Each line is a different chemical. I would like to read the file in an array then create an option menu displaying the chemicals in the array.

Also, the local file I would like to read will the be the same name and location all the time. I have seen people have boxes where the user clicks and chooses their file or to drag and drop but that's not what I'm looking for.

I don't think I explained this properly. I have a file in the same directory as my HTML and JavaScript files that contains words. Example:

Line 1: "Iron" Line 2: "Aluminum" Line 3: "Steel"

etc...

I would like to read the file and parse each line into a different index in an array. I don't want the user to be able to choose which file to read using the <input ... /> thing.

EDIT

As per thg435's question, I'll explain what I am trying to acplish.

I don't think I explained this properly. I have a file in the same directory as my HTML and JavaScript files that contains words. Example:

Line 1: "Iron" Line 2: "Aluminum" Line 3: "Steel"

etc...

I would like to read the file and parse each line into a different index in an array. I don't want the user to be able to choose which file to read using the <input ... /> thing.

Share Improve this question edited Jan 22, 2014 at 17:10 tshepang 12.5k25 gold badges97 silver badges139 bronze badges asked Jan 12, 2014 at 18:58 user3015565 4133 gold badges9 silver badges16 bronze badges

1 FileReader API – Charlie Commented Jan 12, 2014 at 19:03
1 This is a vague, if not off topic, question. You'll get better answers if you tell us what your project is all about: I guess reading a text file into an array is not the ultimate goal. – georg Commented Jan 12, 2014 at 19:03
@thg435 I just added what I would like to acplish. – user3015565 Commented Jan 12, 2014 at 19:10
1 @levi I think you linked this same question... – user3015565 Commented Jan 12, 2014 at 19:13
Here a solution from stackoverflow./questions/14446447/… – levi Commented Jan 12, 2014 at 19:14

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

You're going to want to take a look at the FileReader API. This should allow you to read the text of a local file via readAsText(). This won't work in every browser but should work in all modern browser. You can see which browsers support it here.

Example:

<input id="file" type="file" />

var filesInput = document.getElementById("file");
filesInput.addEventListener("change", function (event) {
    var files = event.target.files;
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function (event) {
        var textFile = event.target;
        alert(textFile.result);
    });
    reader.readAsText(file);
});

It's not possible to invoke the FileReader API without user interaction. Consequently, your user would have to select whatever file to load in order for it to be read in pure JS. Since I'm assuming this will be up on a server, why not just put the list of chemicals also up on the server and GET the JSON encoded array of the results. Then you can decode them with Javascript.

You can access local files in 2 ways that I know of. The first way is making the user drag-and-drop the files onto the page, and using an <input type="file"> tag.

For the former, you would need to do the following:

addEventListener('dragover', function(e){e.preventDefault();});
addEventListener('drop', function(e) {
    eventHandler.call(e.dataTransfer||e.clipboardData);
    e.preventDefault();
});

For the latter, you'd need to add an event listener for the change event on the input:

document.getElementById('upload').addEventListener('change', eventHandler)

And for both, you'd need to have this as a basic callback function:

function eventHandler() {
    var file = this.files[0]; //get the files
    var reader = new FileReader(); //initiate reader
    reader.onloadend = callbackFn; //set event handler
    reader.readAsText(file); //initiate reading of files
    if (this.id) { //only run if this is the input
        var id = this.id; 
        this.outerHTML = this.outerHTML; //this resets the input
        document.getElementById(id).addEventListener('change', eventHandler); //reattach event handler
    }
    function callbackFn(e) {
        document.getElementById('output').value = e.target.result; //output it to a textarea
    }
}

Here is a demo where the text contents (that what you see when opening it in notepad) of any file you drop in it, or any file you select from the input, is put in the textarea.

For more information, see https://developer.mozilla/en-US/docs/Using_files_from_web_applications.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Parse a local file to an array using JavaScript - Stack Overflow

2 Answers 2

与本文相关的文章