How to using javascript to read files into an array in order

Question

I have a bunch of text files on server side with file names 0.txt, 1.txt, 2.txt, 3.txt and so forth. I want to read the content of all files and store them in an array A, such that A[0] has 0.txt's content, A[1] has 1.txt's, ...

How can I do it in Javascript / jquery?

Originally, I used $.ajax({}) in jQuery to load those text files. But it didn't work, because of the asynchronous nature of ajax. I tried to set $.ajax({...async=false...}), but it was very slow -- I have ~1000 10KB files to read in total.

Local files? Usually you cannot easily access files on the user's system using JavaScript. So you need to clarify your question what exactly you are trying to do, where the files are, etc. Oh, and jQuery sounds pretty unrelated as it's mainly a DOM library. Or do you want to load the files using AJAX? — ThiefMaster
– ThiefMaster, Commented Sep 16, 2012 at 1:40
Even if you got this working asynchronously (which is very doable), I should warn you that I'm fairly certain popular browsers enforce a convention to restrict active requests on a single domain to two simultaneous requests at a time. Server-side pre-processing might be in order. — lsuarez
– lsuarez, Commented Sep 16, 2012 at 2:18
@ThiefMaster: while the applicability of the practice may be questionable, File API would work just fine in this scenario — Oleg
– Oleg, Commented Sep 16, 2012 at 2:27
If you're okay with loading all these at the time page is loaded and if you have the option to use a server-side script (PHP/ASP) you can directly skip the Javascript part. — inhan
– inhan, Commented Sep 16, 2012 at 2:41

Mifeng · Accepted Answer · 2012-09-16 03:07:28Z

1

from your question, you want to load txt file from server to local:

var done = 0, resultArr = [], numberOfFiles = 1000;

function getHandler(idx) {
    return function(data) {
        resultArr[idx] = data;
        done++;
        if (done === numberOfFiles) {
            // tell your other part all files are loaded
        }
    }
}

for (var i = 0; i < numberOfFiles; i++) {
    $.ajax(i + ".txt").done(getHandler(i));
}

jsFiddle: http://jsfiddle.net/LtQYF/1/

edited Sep 16, 2012 at 3:07

answered Sep 16, 2012 at 2:48

Mifeng

1,56515 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg · Accepted Answer · 2012-09-16 02:24:58Z

1

What you're looking for is File API introduced in HTML5 (working draft).

The examples in this article will point you in the right direction. Remember that the end user will have to initiate the action and manually select the files - otherwise it would have been a terrible idea privacy- and security-wise.

Update:

I found (yet again) the mozilla docos to be more readable! Quick html mockup:

<input type="file" id="files" name="files[]" onchange="loadTextFile();" multiple/>
<button id="test"onclick="test();">What have we read?</button>

...and the JavaScript:

var testArray = []; //your array

function loadTextFile() {
  //this would be tidier with jQuery, but whatever
  var _filesContainer = document.getElementById("files");
  //check how many files have been selected and iterate over them
  var _filesCount = _filesContainer.files.length;
  for (var i = 0; i < _filesCount; i++) {
    //create new FileReader instance; I have to read more into it
    //but I was unable to just recycle one
    var oFReader = new FileReader();

    //when the file has been "read" by the FileReader locally
    //log its contents and push them into an array
    oFReader.onload = function(oFREvent) {
      console.log(oFREvent.target.result);
      testArray.push(oFREvent.target.result);
    };

    //actually initiate the read
    oFReader.readAsText(_filesContainer.files[i]);
  }
}

//sanity check
function test() {
  for (var i = 0; i < testArray.length; i++) {
    console.warn(testArray[i]);
  }
}

Fiddled

edited Sep 16, 2012 at 2:24

answered Sep 16, 2012 at 1:51

Oleg

25.1k8 gold badges64 silver badges94 bronze badges

2 Comments

Lee Taylor Over a year ago

Except that the files to be processed are on the server and there's around 1000 of them...

Oleg Over a year ago

ಠ_ಠ You're right. How does one ask a question and leave out a critical detail like this until a later edit?

jeff.vanvoorst · Accepted Answer · 2012-09-16 02:09:56Z

-1

You don't give much information to give a specific answer. However, it is my opinion that "it doesn't work because of the asynchronous nature of ajax" is not correct. You should be able to allocate an array of the correct size and use a callback for each file. You might try other options such as bundling the files on the server and unbundling them on the client, etc. The designs, that address the problem well, depend on specifics that you have not provided.

answered Sep 16, 2012 at 2:09

jeff.vanvoorst

1196 bronze badges

Collectives™ on Stack Overflow

How to using javascript to read files into an array in order

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related