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

最新推荐文章于 2022-12-01 12:49:04 发布
最新推荐文章于 2022-12-01 12:49:04 发布
阅读量187 收藏
点赞数
文章标签： java

一、默认FileReader会分段读取File对象，这是分段大小不一定，并且一般会很大

HTML：

<div class="container">
    <!--文本文件验证-->
    <input type="file" id="file" />
    <h4>选择文件如下:</h4>
    <blockquote></blockquote>
</div>

JS：

//读取文本文件实例
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
    showFiles();
}
function showFiles() {
    //获取选择文件的数组
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        readFile(file);
    }
}
//读取文件内容
function readFile(file) {
    var reader = new FileReader();
    //中文windows系统 txt 文本多数默认编码 gbk
    reader.readAsText(file, 'gbk');
    reader.onprogress = function (e) {
        //默认情况下也是分段读取，
        //默认情况下，每次分段大小不确定，不同浏览器也不相同
        //第一次读取比较小 Google每段：8028160(7.65625mb)   FF每段：786432(768mb)   IE下：4096（4k）
        console.info(e);
    }
    reader.onload = function (e) {
        var result = reader.result;
        console.info(e.loaded);
    }
}

二、分段读取文本文件+进度条实例，并解决IE浏览器崩溃问题

HTML：

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段读取文件：</div>
        <div class="panel-body">
            <input  type="file" id="file" />
            <input type="button" id="abort" value="中断" />
            <input type="button" id="containue" value="继续读取文件" />
            <p>
                <label>读取进度：</label><progress id="Progress"  style="width:300px;" value="0" max="100"></progress>
            </p>
            <p id="Percent"></p>
            <p id="Status"></p><hr />
            <blockquote style="word-break:break-all;"></blockquote>
        </div>
    </div>
</div>

JS：

var read = {
    //初始化绑定
    init: function () {
        var _this = this;
        _this.status = document.getElementById('Status');
        _this.progress = document.getElementById('Progress');
        _this.percent = document.getElementById('Percent');

        document.getElementById('file').onchange = _this.fileHandler;
        document.getElementById('abort').onclick = _this.abortHandler;
        document.getElementById('containue').onclick = _this.containueHandler;

        _this.loaded = 0;
        //每次读取1M
        _this.step = 3 * 2;
    },
    //当有选中文件时,事件处理
    fileHandler: function (e) {
        //读取文件
        var _this = read;
        //获取上传文件
        var file = _this.file = this.files[0];
        var reader = _this.reader = new FileReader();
        //绑定信息和事件
        _this.total = file.size;
        _this.isabort = false;//标记正在读取还是以已经中止
        reader.onprogress = _this.onProgress;
        reader.onabort = _this.onAbort;
        reader.onerror = _this.onError;
        reader.onload = _this.onLoad;
        //从头读取一块
        _this.readBlob(0);
        $('blockquote').empty();
    },
    //中断 操作
    abortHandler: function (e) {
        var _this = read;
        if (_this.reader) {
            console.log('读取操作操作中止,' + _this.loaded);
            _this.isabort = true;
            _this.reader.abort();
        }
    },
    //继续操作
    containueHandler: function (e) {
        var _this = read;
        _this.isabort = false;
        console.info('继续：' + _this.loaded);
        //继续读取
        _this.readBlob(_this.loaded);
    },
    //读取过程
    onProgress: function (e) {
        var _this = read;
        if (e.lengthComputable == false)
            return;
        _this.loaded += e.loaded;
        //更新进度条
        var value = (_this.loaded / _this.total) * 100;
        _this.percent.innerText = value;
        _this.progress.value = value;
    },
    //中止上传事件
    onAbort: function () {
        var _this = read;
        //console.log('读取操作操作中止,'+_this.loaded);
    },
    //当出现异常时
    onError: function () { },
    //读取成功  结束
    onLoad: function (e) {
        var _this = read;
        var result = _this.reader.result;
        $('blockquote').append(result);
        //判断是否已经读到最后，如果没有继续读取
        if (_this.loaded < _this.total) {
            //IE 浏览器下，事件触发速度太快，页面容易出现假死现象，解决方案延缓事件触发
            setTimeout(function () {
                _this.readBlob(_this.loaded);
            }, 10);
            //直接使用在Google，FF没问题
            // _this.readBlob(_this.loaded);
        } else {
            _this.loaded = _this.total;
        }
    },
    readBlob: function (start) {
        var _this = read;
        if (_this.isabort)
            return;
        var file = _this.file;
        var blob = file.slice(start, start + _this.step);
        _this.reader.readAsText(blob, 'gbk');
    }
};
read.init();

三、分段读取文件为ArrayBuffer+进度条显示

HTML，同上

JS：

var read = {
    //初始化绑定
    init: function () {
        var _this = this;
        _this.status = document.getElementById('Status');
        _this.progress = document.getElementById('Progress');
        _this.percent = document.getElementById('Percent');

        document.getElementById('file').onchange = _this.fileHandler;
        document.getElementById('abort').onclick = _this.abortHandler;

        _this.loaded = 0;
        //每次读取1M
        //_this.step = 1024 * 1024;
        //_this.step = 1024;
        _this.step = 1024;
        _this.times = 0;
    },
    //当有选中文件时,事件处理
    fileHandler: function (e) {
        //读取文件
        var _this = read;
        //获取上传文件
        var file = _this.file = this.files[0];
        var reader = _this.reader = new FileReader();
        //绑定信息和事件
        _this.total = file.size;
        reader.onloadstart = _this.onLoadStrart;
        reader.onprogress = _this.onProgress;
        reader.onabort = _this.onAbort;
        reader.onerror = _this.onError;
        reader.onload = _this.onLoad;
        //reader.onloadend = _this.onLoadEnd;
        //从头读取一块
        _this.readBlob(0);
        $('blockquote').empty();
    },
    //中断
    abortHandler: function (e) {
        var _this = read;
        if (_this.reader) {
            _this.reader.abort();
        }
    },
    //开始读取文件
    onLoadStrart: function () { },
    //读取过程
    onProgress: function (e) {
        var _this = read;
        //e.loaded 当前读取的数量
        //e.total 读取总量
        _this.loaded += e.loaded;
        //更新进度条
        _this.progress.value = (_this.loaded / _this.total) * 100;
    },
    //中止上传事件
    onAbort: function () { },
    //当出现异常时
    onError: function () { console.log('读取出错'); },
    //读取成功  结束
    onLoad: function (e) {
        var _this = read;
        var reader = _this.reader;
        // console.info(_this.loaded + '---' + _this.total);
        //console.info(reader.result); //ArrayBuffer 数组
        //console.info(reader.result.byteLength); //ArrayBuffer 数组 的长度

        //转换成  Int8Array 类型
        //var b = new Int8Array(reader.result);
        //转换成 Int32Arrary 类型
        var b = new Int32Array(reader.result);
        console.info(b); //ArrayBuffer 数组 的长度
        $('blockquote').append(b.toString());
        //判断是否已经读到最后，如果没有继续读取
        if (_this.loaded < _this.total) {
            _this.readBlob(_this.loaded);
        } else {
            _this.loaded = _this.total;
        }
    },
    //读取结束时 ,每次读取成功结束或调用abord
    onLoadEnd: function (e) {
        //console.log('读取结束');
    },
    readBlob: function (start) {
        var _this = read;
        var blob,
            file = _this.file;
        _this.times += 1;
        console.info('start:' + start);
        blob = file.slice(start, start + _this.step);
        _this.reader.readAsArrayBuffer(blob);
    }
};
read.init();

 分段读取文件（四）：http://www.cnblogs.com/tianma3798/p/5839869.html

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

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

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

weixin_34071713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html5FileReader文档.docx
10-28
FileReader文档
HTML5之FileReader的使用
weixin_33809981的博客
01-17 103
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：1.检测浏览器对FileReader的支持if(window.FileReader){ varfr...
使用FileReader进行文件分段读取
qq_15506981的博客
11-20 1230
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <!-- 文件上传的框 --&g
FileReader分步读取文件
qq_15506981的博客
11-20 189
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <fieldset> <legend>分步读取文件：</legend>
HTML5 文件域+FileReader 分段读取文件(四)
weixin_33795743的博客
09-04 147
一、分段读取txt文本 HTML： &lt;div class="container"&gt; &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt;分段读取文件：&lt;/div&gt; &lt;div class="pa
HTML5 文件域+FileReader 分段读取文件并上传到服务器
09-27
主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下
浅谈HTML5 FileReader分布读取文件以及其方法简介
09-27
本篇文章主要介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS+HTML5 FileReader实现文件上传前本地预览功能
10-19
如果是，创建一个`FileReader`对象，并设置`onloadend`事件处理器，该处理器会在文件读取完成后更新图像预览。 #### 四、扩展功能 除了基本的预览功能外，还可以添加更多的功能来增强用户体验： - **进度条显示**...
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS+HTML5 FileReader对象用法示例
10-20
主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下
js 文件的上传 分段读取文件 FileReader
kangmingyaner的博客
09-06 5214
读取文本  或二进制文件 function backUpload(input) {//上传 var fileSize = 0;//文件大小 var count=""; _start=0; if (window.FileReader) {//支持chrome IE10 _file1 = input.files[0]; var filename = _file
【Java难点攻克】「大文件处理系列」让我们一起去挑战一下如何读取一个较大或者超大的数据文件
世界上并没有完美的程序，但是我们并不因此而沮丧，因为写程序就是一个不断追求完美的过程。
12-01 1713
Java在JDK 1.4引入了ByteBuffer等NIO相关的类，使得 Java 程序员可以抛弃基于 Stream ，从而使用基于 Block 的方式读写文件，java io操作中通常采用BufferedReader，BufferedInputStream等带缓冲的IO类处理大文件，不过java nio中引入了一种基于MappedByteBuffer操作大文件的方式，其读写性能极高，本文会介绍其性能如此高的内部实现原理，分析一下到底是 FileChannel 快还是 MappedByteBuffer 块。
pdf html5 阅读进度,HTML5 FileReader读取大文件带进度条
weixin_33238239的博客
05-31 528
HTML5 FileReader读取大文件带进度条一、FileReader读取文件内容File API一文中主要介绍获取文件句柄的方法，接下来我们就要利用该文件句柄来读取文件内容，这是通过FileReader来实现的，通过FileReader接口，我们可以异步地将文件内容加载到内存中，赋予某个js变量。FileReader具体支持哪些方法和事件，这里就不介绍了，有兴趣的可以去w3c官网上看看Fil...
java中filereader读取文件_FileReader读取文件
weixin_32549267的博客
02-16 2054
前言：FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。input:file在介绍FileReader之前，先简单介绍input的file类型。input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口，文字表示对文件的描述(大部分情况下为文件名)；file类型的input会有files属性，保存着文件的相关信息。点击按钮上传一个文件...
FileReader读取文件的三种方式
热门推荐
s77的博客
02-04 5万+
#日常练习 FileReader可以通过一次读取文件中一个字符，一次读取一个字符数组或使用缓冲区这三种方式来读取文件 备注：使用缓冲区的方式的内部实现是借助数组完成 package IO; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; public class F
高效读取大文件，再也不用担心 OOM 了！
Java极客技术
06-15 1万+
每天早上七点三十，准时推送干货Photo by Luisa Brimble on Unsplash最近阿粉接到一个需求，需要从文件读取数据，然后经过业务处理之后存储到数据库中。这个需求，...
HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket
weixin_34198881的博客
09-08 358
一、同时上传多个文件处理 HTML： &lt;div class="container"&gt; &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt;分段读取文件：&lt;/div&gt; &lt;div class="p
Java FileReader 读文件乱码现象
Not In System
11-07 1万+
测试代码： /** package com.jwen; import java.io.FileNotFoundException; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; /**  * @author jwen  *  */ public class
javascrip读取excel文件使用HTML5 FileReader API
最新发布
05-27
要使用HTML5 FileReader API读取Excel文件，可以使用以下步骤： 1. 在HTML页面中添加一个文件上传控件，例如： ```html <input type="file" id="fileInput" /> ``` 2. 使用JavaScript获取文件上传控件，并添加一个`change`事件监听器来获取用户选择的文件： ```javascript const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', handleFileSelect, false); function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = handleFileLoad; reader.readAsBinaryString(file); } ``` 在这个示例中，我们获取了文件上传控件元素，并为其添加了一个`change`事件监听器。当用户选择了一个文件时，事件监听器会调用`handleFileSelect`函数来处理文件。 3. 在`handleFileSelect`函数中，我们创建了一个`FileReader`对象，并使用`readAsBinaryString`方法将文件读入内存： ```javascript function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = handleFileLoad; reader.readAsBinaryString(file); } ``` 注意，我们使用了`readAsBinaryString`方法来读取二进制数据，因为Excel文件是二进制文件。 4. 一旦文件被读入内存，`FileReader`对象的`onload`事件将会被触发。我们可以在事件处理函数中访问文件的二进制数据： ```javascript function handleFileLoad(event) { const data = event.target.result; const workbook = XLSX.read(data, { type: 'binary' }); const sheetName = workbook.SheetNames[0]; const sheet = workbook.Sheets[sheetName]; const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); console.log(jsonData); } ``` 在这个示例中，我们使用`XLSX.read`方法来将二进制数据转换成一个`Workbook`对象。然后，我们选择要读取的工作表，并将其转换成JSON格式的数据。最后，我们将数据打印到控制台上。 需要注意的是，这个示例代码只是一个简单的例子。在实际应用中，你可能需要处理更复杂的Excel文件，例如包含多个工作表或带有复杂格式的表格。你需要根据具体情况进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值