我正在制作一个客户端javascript应用程序，它只在客户端上传文件并在客户端本身处理它 . （它不会将文件发送给服务器）

我编写的代码很容易在客户端加载小文件，但挂起浏览器加载大文件（如大小为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.

我已经在JSFIDDLE（http://jsfiddle.net/q0x90jsv/1/）以及下面编写了代码 .

HTML代码

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

Javascript代码

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);
});

另外，当我尝试在浏览器中打开大文件（100MB）时（使用简单的FILE-> OPEN-> BROWSE FILE-> OPEN）它很容易打开 .

如果有办法实现这一点，请告诉我 .

javascript jquery file-upload innerhtml onload