一、分段读取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

HTML5 文件域+FileReader 分段读取文件(四)的更多相关文章

  1. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

  2. HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket

    一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...

  3. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

  4. HTML5 文件域+FileReader 分段读取文件(五)

    一.默认FileReader会分段读取File对象,这是分段大小不一定,并且一般会很大 HTML: <div class="container"> <!--文本文 ...

  5. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  6. Java利用内存映射文件实现按行读取文件

    我们知道内存映射文件读取是各种读取方式中速度最快的,但是内存映射文件读取的API里没有提供按行读取的方法,需要自己实现.下面就是我利用内存映射文件实现按行读取文件的方法,如有错误之处请指出,或者有更好 ...

  7. .net上传文件,利用npoi读取文件信息到datatable里

    整理代码,.net上传文件,利用npoi读取文件到datatable里,使用了FileUpload控件,代码如下: protected void Button1_Click(object sender ...

  8. php高效遍历文件夹、高效读取文件

    /** * PHP高效遍历文件夹(大量文件不会卡死) * @param string $path 目录路径 * @param integer $level 目录深度 */ function fn_sc ...

  9. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

随机推荐

  1. jquery------提供灵活的方法参数

    index.jsp <h1 >再次重逢的世界</h1> my.js $(document).ready(function(){ (function($){ $.fn.shado ...

  2. Runner站立会议之个人会议(冲刺二)

    2016.5.23 今天开会确定了接下来的目标,完成收集相关数据任务 明天要寻找类型对应的按钮图标 遇到的问题:数据中男女生,有无恋爱,区域限制均可能导致计划部分有出入 2016.5.24 今天查询相 ...

  3. PHP 高并发、抢票、秒杀 解决方案

    对于抢票.秒杀这种业务,我说说自己对这种高并发的理解吧,这里提出个人认为比较可行的几个方案:方案一:使用队列来实现可以基于例如MemcacheQ等这样的消息队列,具体的实现方案这么表述吧比如有100张 ...

  4. Git stash方法(转)

    命令:git stash1.使用git stash保存当前的工作现场,那么就可以切换到其他分支进行工作,或者在当前分支上完成其他紧急的工作,比如修订一个bug测试提交. 2.如果一个使用了一个git ...

  5. Android-给另一个Activity传递HashMap

    I have a HashMap which I would pass to another Activity class. I simply use this code: Intent intent ...

  6. mysql 导入excel 或 .csv

    第一步 导出excel 去掉列头,设置文本里面格式

  7. inline-block的特点

    <html> <head> <meta charset="utf-8"> <title></title> <sty ...

  8. JAV基础语法之---数据类型转换

    数制转换": 1.string 转 byte[] String str = "Hello";byte[] srtbyte = str.getBytes(); 2.byte ...

  9. [原创]CentOS下Mysql双机互为备份

    一.环境: 1.安装Centos-6.5-x64位系统的机器两台: host1:192.168.2.3 host2:192.168.2.4  (互相能ping通) 2.安装Mysql. 命令:Yum ...

  10. I/O模型系列之三:IO通信模型BIO NIO AIO

    一.传统的BIO 网络编程的基本模型是Client/Server模型,也就是两个进程之间进行相互通信,其中服务端提供位置信息(绑定的IP地址和监听端口),客户端通过连接操作向服务端监听的地址发起连接请 ...