I want to do some basic calculations based on a text file. However since it's for a client it needs to be straight forward. Is it possible to do these calculations purely in the client. If somebody selects a file to upload through a form. Can I instead capture that through Javascript and process it that way?

I want to do some basic calculations based on a text file. However since it's for a client it needs to be straight forward. Is it possible to do these calculations purely in the client. If somebody selects a file to upload through a form. Can I instead capture that through Javascript and process it that way?

• javascript

Share Improve this question Follow asked Dec 6, 2010 at 6:32 ChrisChris 64111 gold badge99 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Matti is correct, with HTML 4 you're out of luck.

However, with HTML 5 this is made possible by using the FileReader API. Currently support for this feature is limited to very recent versions of Chrome, Firefox and Opera. A similar feature exists in older versions of Firefox and this can also be done in older versions of Internet Explorer by using ActiveX. I would imagine that Google Gears also would allow this although I haven't looked into it.

The Javascript to do this would look like:

$( "#files" ).change( function( event )
{
    var reader = new FileReader();
    reader.onload( e ) { /* handle a file being loaded. contents in event.result */ };
    reader.onerror( e ) { /* handle an error during the file reading */ };

    var files = event.target.files;

    for( var i = 0; i < files.length; i++ )
        console.log(reader.readAsText( files[i] ));
});

Where #files is simply:

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