一、分段讀取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);} }

?讀取文件三：http://www.cnblogs.com/tianma3798/p/5839810.html

讀取文件二：http://www.cnblogs.com/tianma3798/p/5839791.html

讀取文件一：http://www.cnblogs.com/tianma3798/p/4355949.html

轉載于:https://www.cnblogs.com/tianma3798/p/5839869.html

總結

以上是生活随笔為你收集整理的HTML5 文件域+FileReader 分段读取文件(四)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。