浅谈FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

了解https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

1、FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

abortnone：中断读取
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

2、. 处理事件
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态。

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

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

读取文件代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script type="text/javascript">

    var result=document.getElementById("result");

    var file=document.getElementById("file");

    //判断浏览器是否支持FileReader接口

    if(typeof FileReader == 'undefined'){

        result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";

        //使选择控件不可操作

        file.setAttribute("disabled","disabled");

    }

    function readAsDataURL(){

        //检验是否为图像文件

        var file = document.getElementById("file").files[0];

        if(!/image\/\w+/.test(file.type)){

            alert("看清楚，这个需要图片！");

            return false;

        }

        var reader = new FileReader();

        //将文件以Data URL形式读入页面

        reader.readAsDataURL(file);

        reader.onload=function(e){

            var result=document.getElementById("result");

            //显示文件

            result.innerHTML='<img src="' + this.result +'" alt="" />';

        }

    }

    function readAsBinaryString(){

        var file = document.getElementById("file").files[0];

        var reader = new FileReader();

        //将文件以二进制形式读入页面

        reader.readAsBinaryString(file);

        reader.onload=function(f){

            var result=document.getElementById("result");

            //显示文件

            result.innerHTML=this.result;

        }

    }

    function readAsText(){

        var file = document.getElementById("file").files[0];

        var reader = new FileReader();

        //将文件以文本形式读入页面

        reader.readAsText(file);

        reader.onload=function(f){

            var result=document.getElementById("result");

            //显示文件

            result.innerHTML=this.result;

        }

    }

</script>

<p>

    <label>请选择一个文件：</label>

    <input type="file" id="file" />

    <input type="button" value="读取图像" onclick="readAsDataURL()" />

    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />

    <input type="button" value="读取文本文件" onclick="readAsText()" />

</p>

<div id="result" name="result"></div>

</body>

</html>

简单的上传实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>html5filereader上传图片</title>

    <script type="text/javascript">

        var loadImageFile = (function () {

            if (window.FileReader) {

                var    oPreviewImg = null,

                        oFReader = new window.FileReader(),//创建对象

                        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

                oFReader.onload = function (oFREvent) {

                    console.log(!oPreviewImg);//true

                    if (!oPreviewImg) {

                        var newPreview = document.getElementById("imagePreview");

                        oPreviewImg = new Image();

                        oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";

                        oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";

                        newPreview.appendChild(oPreviewImg);

                    }

                    oPreviewImg.src = oFREvent.target.result;

                    document.getElementById('result').innerHTML="<img src='"+oFREvent.target.result+"'>"

                };

                return function () {

                    var aFiles = document.getElementById("imageInput").files;

                    console.log(aFiles);

                    if (aFiles.length === 0) { return; }

                    if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }

                    oFReader.readAsDataURL(aFiles[0]);

                }

            }

            if (navigator.appName === "Microsoft Internet Explorer") {

                return function () {

                    document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;

                }

            }

        })();

    </script>

    <style type="text/css">

        #imagePreview {

            width: 160px;

            height: 120px;

            float: right;

            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

        }

    </style>

</head>

<body>

<div id="imagePreview"></div>

<form name="uploadForm">

    <div id="result"></div>

    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />

        <input type="submit" value="Send" /></p>

</form>

</body>

</html>

浅谈FileReader的更多相关文章

【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉前言我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常以前虽然知道一 ...
浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
Linux特殊符号浅谈
Linux特殊字符浅谈我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...

随机推荐

数据与任务的并行---Parallel类
Parallel类是对线程的抽象,提供数据与任务的并行性.类定义了静态方法For和ForEach,使用多个任务来完成多个作业.Parallel.For和Parallel.ForEach方法在每次迭代的 ...
django drf Token验证
https://www.django-rest-framework.org/api-guide/authentication/#basicauthentication 1.INSTALLED_APPS ...
12c ocp 062新考题（之前没出现过）-1
1.One of your databases has archive logging enabled and RMAN backups are taken at regular intervals. ...
【文文殿下】对后缀自动机(SAM)的理解
后缀自动机,是一种数据结构,是由状态和转移关系构成的.它虽然叫做后缀自动机,可是他却与后缀并没有什么太大的联系. 后缀自动机的每一种状态都是原串的一些子串的集合,每个子串只唯一存在于某个状态中,对每一 ...
nosql基本了解
数据库分为关系型数据库和非关系型数据库nosql,关系型数据库比较常见,此处不再多讲:nosql有key-value存储数据库,比如redis:文档型数据库,比如mongodb:列存储数据库,比如hb ...
samba服务器的安装与配置（之前是因为没有把共享文件权限放开！）（windows7和centOS6）
注:centOS6跟centOS7安装方法不一样哦.以下是centOS6的安装过程. 安装:yum -y install samba 启动:/etc/init.d/smb start 设置开机启动:c ...
[iOS笔试600题]二、常识篇（共有72题）
[B]1.NSObject是一个根类,几乎所有的类都是从它派生而来.但是根类并不拥有真它类都有的alloc和init方法?［判断题］ A. 正确 B. 错误 [A]2. UIResponder可以让继 ...
Linux RPM和YUM
rpm包的管理:sealed 介绍: 一种用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中.它生成具有.RPM扩展名的文件. RPM是RedHat Package Manager(Re ...
【Alpha】Phylab 发布说明
Phylab Alpha阶段发布说明一.发布地址 Phylab 二.新功能 1. 控制台由于往届项目控制台并未发布,因此我们在完善后将这部分放在新功能部分.目前使用控制台需要向开发者申请. 1.1 ...
获得自己电脑的SSH公匙
关于什么是SSH请点击此"www.Baidu.com”网站了解我这里只说怎么获取属于自己电脑的SSH公匙本人是Win10电脑所以相对来说简单一点点击win ->选择设置-&g ...

浅谈FileReader

浅谈FileReader的更多相关文章

随机推荐

热门专题