1.检测浏览器对FileReader的支持

1 if(window.FileReader) {

2     var fr = new FileReader();

3     // add your code here

4 }

5 else {

6     alert("Not supported by your browser!");

7 }

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，

需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

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

3. 处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

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

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

fr.onload = function() {

    this.result;

};

例子1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>FileReader</title>

</head>

<body>

    <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>

<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>

javascript:FileReader对象（读取文件）的更多相关文章

  1. 使用FileReader接口读取文件内容

    如果想要读取或浏览文件,则需要通过FileReader接口,该接口不仅可以读取图片文件,还可以读取文本或二进制文件,同时,根据该接口提供的事件与方法,可以动态侦察文件读取时的详细状态,接下来,我们详细 ...

  2. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  3. html5中利用FileReader来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

  4. 前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

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

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

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

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

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

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

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

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

  9. HTML5 文件域+FileReader 分段读取文件(四)

    一.分段读取txt文本 HTML: <div class="container"> <div class="panel panel-default&qu ...

随机推荐

  1. centos6.9发送邮件功能

    centos6.9发送邮件功能       第一个里程碑 测试发邮件的功能 系统环境centos 6.9     #配置发邮件 /etc/mail.rc中追加 set bsdcompat set fr ...

  2. 第一次有人把小米9快充讲的这么简单明了qc3.0 usb pd

    原文: http://www.chongdiantou.com/wp/archives/32093.html 2019年2月20日,小米在北京工业大学体育馆举办了盛况空前的小米9手机发布会,会上雷军揭 ...

  3. Quidway S系列交换机

    一. 华为交换机设备,以Quidway S系列命名,广泛适用于企业网.园区网和运营网络.Quidway S系列交换机包括: 接入层交换机 汇聚层交换机 核心层交换机 1.接入层交换机 包含两个系列: ...

  4. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

  5. [UE4]使用C++重写蓝图，SpawnObject根据类型动态创建UObject

    先大量使用蓝图制作项目,后续再用C++把复杂的蓝图重写一遍,用C++代码按照蓝图依葫芦画瓢就可以了,很简单,但需要遵守一些原则: 第一种方法:使用继承 一.创建一个C++类作为蓝图的父类(C++类继承 ...

  6. switch case 变量初始化问题

    今天再写alsa的时候遇到一个稀奇古怪的问题,网上看了下资料,摘出来入下 代码: int main() { ; switch(a) { : ; break; : break; default: bre ...

  7. hive类型转化错误，会错误提示指定分区参数

    select * from TRAD_LIST t WHERE t.dt >= '2017-10-18' and t.dt <= '2017-11-01' and t.con_level ...

  8. spring boot区分生产环境和开发环境

    回顾一下spring boot使用基础,做个笔记. 通过配置文件,设置项目的开发环境和生成环境. 项目目录结构: application-dev.yml是开发环境配置文件,application-pr ...

  9. css写复选框

    前面讲过<完全使用css编写复选框>,后来在深入学习sass过程中,发现:这种写法虽然也能达到目的,但是稍嫌复杂了一点.这里介绍一种可以说更简单一点的方法,其实也就是html结构更简单一点 ...

  10. day4----函数-闭包-装饰器

    本文档内容: 1 python中三种名称空间和作用域 2 函数的使用 3 闭包 4 装饰器 一 python中三种名称空间和作用域 1.1名称空间: 当程序运行时,代码从上至下依次执行,它会将变量与值 ...