Browser hangs after uploading large file on client side using javascript

Question

I was making a client side javascript application which uploads the file on client side only and process it on client side itself. (IT DOESN'T SEND THE FILE TO SERVER)

The code which I have written loads small files on client side easily but hangs the browser on loading Large files(like files of size 100MB).

I have put an alert after the file has been loaded(i.e inside onload function). SO even if when I try uploading large files it is giving me the alert, which means that the file has been loaded but when it tries to copy the file text blob saved in a variable to the inner html of a div then the browser gets hanged.

I have written the code on JSFIDDLE (http://jsfiddle.net/q0x90jsv/1/) as well as below.

HTML code

<input type="file" id="myfile" />
<p id="sel">Data will appear here</p>

Javascript Code

function readFile(evt) {
    var files = evt.target.files;
    var file = files[0];
    var reader = new FileReader();
    // reader.onload = function() {
    // console.log(this.result);
    // }
    reader.readAsText(file)
    reader.onload = function (e) {
        alert("FILE LOADED");
        var f = reader.result;

        document.getElementById("sel").innerHTML = f;
    }
}


$(document).ready(function () {
    //adding mouse up listener to get selected text from left pane
    document.getElementById('myfile').addEventListener('change', readFile, false);
});

Additionally when I tried opening the large file(100MB) in browser(using simple FILE->OPEN->BROWSE FILE->OPEN) It got opened easily.

Please let me know if there is a way out to accomplish this.