Parsing Binary Files in Client-side JS

Question

I'm wondering if there's any possible way of parsing a binary file in client-side Javascript. I would like to write a page that contains an HTML input form for a binary file ( a sound file is the end game ) and a button that activates a Javascript function that 'parses' the file. Is this possible with client-side Javascript?

I know I can do this with C on the server, but I'd like to avoid anything server-side involved. This is because I'm expecting the task to be computationally intensive and I would like to keep the load and the server low.

From what I've seen on Google, it's possible to parse binary data in Javascript. I'm just not sure how to get the file in the hands of a Javascript function without first passing it to the server.

Answer 1

You can use the FileReader API to read a file client-side

Example:

HTML Markup:

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

JavaScript:

var fileInput = document.getElementById('myfile');
var fReader = new FileReader();

fReader.onload = function(e) {
  console.log(e.target.result); /// <-- this contains an ArrayBuffer
}

fileInput.onchange = function(e) {
    var file = this.files[0];
    fReader.readAsArrayBuffer(file);
}

JSFiddle: http://jsfiddle.net/wbwHU/ (look at the console for ArrayBuffer output)