HTML5 FileReader分布读取文件以及其方法简介

原创 2017年05月02日 22:58:09

效果图

老规矩先上效果图
这里写图片描述

先介绍一下H5中FileReader的一些方法以及事件

FileReader方法

名称 作用
about() 终止读取
readAsBinaryString(file) 将文件读取为二进制编码
readAsDataURL(file) 将文件读取为DataURL编码
readAsText(file, [encoding]) 将文件读取为文本
readAsArrayBuffer(file)​​​​​​​ 将文件读取为arraybuffer

FileReader事件

名称 作用
onloadstart 读取开始时触发
onprogress 读取中
onloadend 读取完成触发,无论成功或失败
onload 文件读取成功完成时触发
onabort 中断时触发
onerror 出错时触发

代码

分布读取文件核心思想, 将文件分块以每M进行读取.

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form>
        <fieldset>
            <legend>分步读取文件:</legend>
            <input type="file" id="File">
            <input type="button" value="中断" id="Abort">
            <p>
                <lable>读取进度:</lable>
                <progress id="Progress" value="0" max="100"></progress>
            </p>
        </fieldset>
    </form>
    <script src="./loadFile.js"></script>
    <script>

            var progress = document.getElementById('Progress');//进度条

            var events = {
                load: function () {
                    console.log('loaded');
                },
                progress: function (percent) {
                    console.log(percent);
                    progress.value = percent;
                },
                success: function () {
                    console.log('success');
                }
            };
            var loader;

            // 选择好要上传的文件后触发onchange事件
            document.getElementById('File').onchange = function (e) {
                var file = this.files[0];
                console.log(file)

                //loadFile.js
                loader = new FileLoader(file, events);
            };

            document.getElementById('Abort').onclick = function () {
                loader.abort();
            }
        </script>
</body>
</html>

loadFile.js部分

/*
* 文件读取模块
* file  文件对象
* events 事件回掉对象 包含 success , load, progress
*/
var FileLoader = function (file, events) {
    this.reader = new FileReader();
    this.file = file;
    this.loaded = 0;
    this.total = file.size;
    //每次读取1M
    this.step = 1024 * 1024;
    this.events = events || {};
    //读取第一块
    this.readBlob(0);
    this.bindEvent();  
}

FileLoader.prototype = {
    bindEvent: function (events) {
        var _this = this,
            reader = this.reader;

        reader.onload = function (e) {
            _this.onLoad();
        };

        reader.onprogress = function (e) {
            _this.onProgress(e.loaded);
        };

        // start 、abort、error 回调暂时不加
    },
    // progress 事件回掉
    onProgress: function (loaded) {
        var percent,
            handler = this.events.progress;//进度条

        this.loaded += loaded;
        percent = (this.loaded / this.total) * 100;
        handler && handler(percent);
    },
    // 读取结束(每一次执行read结束时调用,并非整体)
    onLoad: function () {
        var handler = this.events.load;

        // 应该在这里发送读取的数据
        handler && handler(this.reader.result);



        // 如果未读取完毕继续读取
        if (this.loaded < this.total) {
            this.readBlob(this.loaded);
        } else {
            // 读取完毕
            this.loaded = this.total;
            // 如果有success回掉则执行
            this.events.success && this.events.success();
        }
    },
    // 读取文件内容
    readBlob: function (start) {
        var blob,
            file = this.file;

        // 如果支持 slice 方法,那么分步读取,不支持的话一次读取
        if (file.slice) {
            blob = file.slice(start, start + this.step);
        } else {
            blob = file;
        }

        this.reader.readAsText(blob);
    },
    // 中止读取
    abort: function () {
        var reader = this.reader;

        if(reader) {
            reader.abort();
        }
    }
}
版权声明:原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合! https://blog.csdn.net/c_kite/article/details/71105033

H5利用FileReader上传图片

1. Html部分 文件上传演练 Browse... ...
  • ChauncyWu
  • ChauncyWu
  • 2017-01-22 19:50:51
  • 5824

input标签上传图片到后端前用H5的FileReader 方法实现图片的显示

要想在页面上显示上传的本地图片,以前我们的做法是将选择的图片文件上传至后端服务器,后端对其进行存储,再将图片的URL返回到前端,前端通过这个URL来显示图片。而H5的FileReader接口支持本地预...
  • zjbkzj
  • zjbkzj
  • 2017-04-11 16:44:46
  • 3352

h5+FileReader

页面文件标签
  • qq_28786375
  • qq_28786375
  • 2017-06-01 15:59:33
  • 248

HTML5 FileReader 读取txt文件

JS读取本地txt 最近有从本地读取txt文件的需要,奈何网上搜索js读取本地txt,都是新建一个fso对象,即(FileSystemObject)。...
  • j_bleach
  • j_bleach
  • 2016-12-11 19:20:19
  • 10856

HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用...
  • jackfrued
  • jackfrued
  • 2013-05-23 22:46:06
  • 95872

HTML5学习之FileReader接口

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6...
  • zk437092645
  • zk437092645
  • 2013-04-01 11:59:34
  • 105788

用 html5 FileReader 读取本地图片和文本文件

预览本地文件 //预览图片 function previewImage() { var preview = document.querySelector...
  • hui1yuan
  • hui1yuan
  • 2016-11-14 15:26:17
  • 3905

html5 FileReader

FileReader可以已异步的方式用来操作input元素选取的文件,拖拽操作获取的文件以及来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.构造函数Fi...
  • yingxiake
  • yingxiake
  • 2016-03-13 23:27:09
  • 1982

Html5之FileReader接口

先简单介绍一下 FileReader接口 接口方法 readAsBinaryString 参数: file 二进制码 //将文件以二进制形式进行读入...
  • liuyan19891230
  • liuyan19891230
  • 2015-11-22 13:10:38
  • 2721

HTML5的FileReader用法

要想在页面上显示本地图片,以前我们通常的做法是将选择的图片文件上传至后端服务器,后端对其进行存储,再将图片的URL返回到前端,前端通过这个URL来显示图片。而HTML5的FileReader接口支持本...
  • qwbtc
  • qwbtc
  • 2016-08-01 21:00:52
  • 1842
收藏助手
不良信息举报
您举报文章:HTML5 FileReader分布读取文件以及其方法简介
举报原因:
原因补充:

(最多只允许输入30个字)