HTML5 檔案域+FileReader 分段讀取檔案(四)
阿新 • • 發佈:2018-12-17
一、分段讀取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); } }