html5 fileReader -- how to only read the first N characters of a file?

Stu Blair picture Stu Blair · Feb 12, 2013 · Viewed 7.3k times · Source

Currently I use a pattern like the following to read the first 3 characters of a series of files:

var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
  var fr = new FileReader();
  fr.onload = function(e) { 
    var first_three_chars = e.target.result.substr(0,3);
  }
  fr.readAsText(f);
}

The trouble is that I'm only interested in the first 3 characters of the file, whereas this method reads the entire file, wasting lots of memory and time. How can I quickly iterate over the files, simply taking quick peeks at the first characters?

Edit: slice() was the answer, thanks sshen. Here's how I did it:

var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
  var fr = new FileReader();
   fr.onloadend = function(e) {
    if (e.target.readyState == FileReader.DONE) {
      var first_three_chars = e.target.result;
    }
  };
  var blob = f.slice(0, 3);
  fr.readAsText(blob);
}

Answer

NoodleFolk picture NoodleFolk · Feb 12, 2013

You can use the .slice method. You can read more here

var reader = new FileReader();

reader.onloadend = function(evt) 
{
    if (evt.target.readyState == FileReader.DONE)  // DONE == 2
    {
        alert(evt.target.result);
    }
};

var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);