一、分段讀取txt文字

HTML：

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段讀取檔案：</div>
        <div class="panel-body">
            <input type="file" id="file" />
            <blockquote style="word-break:break-all;"
 
></blockquote>
        </div>
    </div>
</div>

JS:

    var fileBox = document.getElementById('file');
    file.onchange = function () {
        //獲取檔案物件
        var file = this.files[0];
        var reader = new FileReader();
        //var step = 10 * 3 * 8; //固定長度擷取 檔案內容時注意，在切分點會有亂碼出現的可能
 

        var step = 1024 * 512; //如果檔案太大，擷取內容小會出現假死現象，因為js執行是同步的
        var total = file.size;
        var cuLoaded = 0;
        console.info("檔案大小：" + file.size);
        //讀取一段成功
        reader.onload = function (e) {
            //處理讀取的結果
            showResult(reader.result);
            cuLoaded += e.loaded;
            
 
//如果沒有讀完，繼續
            if (cuLoaded < total) {
                readBlob(cuLoaded);
            } else {
                cuLoaded = total;
            }
        }
        //處理顯示讀取結果
        $('blockquote').empty();
        function showResult(result) {
            //在讀取結果處理中，如果沒有Dom顯示操作，速度還是非常快的
            //如果有Dom顯示操作在IE下，很容易使瀏覽器崩潰
            //$('blockquote').append('<br />');
            //$('blockquote').append(result);
            console.info(result);
        }
        //開始讀取
        readBlob(0);
        //指定開始位置，分塊讀取檔案
        function readBlob(start) {
            //指定開始位置和結束位置讀取檔案
            var blob = file.slice(start, start + step);
            reader.readAsText(blob, 'gbk');
        }
    }

二.分段讀取檔案為二進位制陣列ArrayBuffer

HTML：

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段讀取檔案：</div>
        <div class="panel-body">
            <input type="file" id="file" />
            <blockquote style="word-break:break-all;"></blockquote>
        </div>
    </div>
</div>

JS：

var reader2 = new FileReader();
var fileBox = document.getElementById('file');
file.onchange = function () {
    //獲取檔案物件
    var file = this.files[0];
    var reader = new FileReader();
    var step = 1024* 1024;
    var total = file.size;
    var cuLoaded = 0;
    console.info("檔案大小：" + file.size);
    //讀取一段成功
    reader.onload = function (e) {
        //處理讀取的結果
        showResult(reader.result);
        cuLoaded += e.loaded;
        //如果沒有讀完，繼續
        if (cuLoaded < total) {
            readBlob(cuLoaded);
        } else {
            cuLoaded = total;
        }
    }
    //處理顯示讀取結果
    $('blockquote').empty();
    function showResult(result) {
        console.info(result);
        var buf = new Uint8Array(result);
        $('blockquote').append('<br/>');
        $('blockquote').append(buf.toString());
    }
    //開始讀取
    readBlob(0);
    //指定開始位置，分塊讀取檔案
    function readBlob(start) {
        //指定開始位置和結束位置讀取檔案
        var blob = file.slice(start, start + step);
        reader.readAsArrayBuffer(blob);
    }
}

三、讀取分段結果的二次處理

var reader2 = new FileReader();
var fileBox = document.getElementById('file');
file.onchange = function () {
    //獲取檔案物件
    var file = this.files[0];
    var reader = new FileReader();
    var step = 10*2*8;
    var total = file.size;
    var cuLoaded = 0;
    //讀取一段成功
    reader.onload = function (e) {
        //處理讀取的結果
        showResult(reader.result);
        cuLoaded += e.loaded;
        //如果沒有讀完，繼續
        if (cuLoaded < total) {
            console.info('cuLoaded:' + cuLoaded);
            readBlob(cuLoaded);
        } else {
            cuLoaded = total;
        }
    }
    //處理顯示讀取結果
    $('blockquote').empty();
    function showResult(result) {
        //解決方案 先讀取 blob 然後在轉換成 字串
        //特別說明，如果使用Uint8Array 則每次讀取數量應該是 8的倍數
        var buf = new Uint8Array(result);
        var blob = new Blob([buf]);
        reader2.readAsText(blob, 'gbk');
        reader2.onload = function (e) {
            $('blockquote').append('<br/>');
            $('blockquote').append(reader2.result);
        }
    }
    //開始讀取
    readBlob(0);
    //指定開始位置，分塊讀取檔案
    function readBlob(start) {
        //指定開始位置和結束位置讀取檔案
        var blob = file.slice(start, start+step);
        reader.readAsArrayBuffer(blob);
    }
}