1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败

3、FileReader接口的使用

//判断浏览器是否支持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;

    }

}

　　

实例－－demo

<!doctype html>

<html>

<head>

　　<title>文件上传</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

</head>

<body>

 <script>

   function readLocalFile () {

		//alert("start...");

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

		//alert(uploadFile);

		//alert(localFile.name);

		//alert(localFile.type);

		//alert(localFile.size);

		var reader = new FileReader();

		//Uncaught SyntaxError:Unexpected identifier

		var content;

		reader.onload = function(event) {

			content = event.target.result;

			//alert(content);

			document.getElementById("img").src = content;

			document.getElementById("fileContent").value = content;

		}

		reader.onerror = function(event) {

		 alert('error')

			//alert("File could not be read! Code " + event.target.error.code);

		}

		//reader.readAsText(localFile,"UTF-8");

		content = reader.readAsDataURL(localFile,"UTF-8");

		//

	}

 </script>

    <section>

		<input type="file" id="uploadFile" onchange="readLocalFile()";/>

		<div><img src="" id="img"/></div>

		<div><textarea id="fileContent" rows="30" cols="60"></textarea></div>

	</section>

</body>

</html>

　　

　　

HTML5读取本地文件　FileReader API接口的更多相关文章

  1. HTML5读取本地文件

    本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php.shell等,是如何读 ...

  2. html5 读取本地文件

    尊重原创:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html HTML5为我们提供了一种与本地文件系统交互的标准方式:Fil ...

  3. FileReader读取本地文件

    FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开 ...

  4. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  5. H5读取本地文件操作

    H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...

  6. 前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器

    [自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文  http://blog.cs ...

  7. .NET 读取本地文件绑定到GridViewRow

    wjgl.aspx.cs: using System; using System.Collections; using System.Configuration; using System.Data; ...

  8. 手工创建tomcat应用，以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  9. 【转】flash air中读取本地文件的三种方法

    actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) var stream:FileStre ...

随机推荐

  1. Linux编程之《看门狗进程》

    Intro 当我们编写服务器代码时,为了让自己的服务器在意外崩溃时能够及时的重启,软件看门狗就显示出它的作用了,该看门狗进程是通过fork一个子进程(业务进程),父进程一旦捕获到了子进程的结束信号就重 ...

  2. iOS7开发中的新特性

        iOS7到现在已经发布了有一段时间了.相信你现在已经了解了它那些开创性的视觉设计,已经了解了它的新的API,比如说SpirteKit,UIKit Dynamics以及TextKit,作为开发者 ...

  3. Socket 使用笔记与注意事项（一）

    SocketAsyncEventArgs 1.该参数可以重复使用. 2.SocketAsyncEventArgs 的事件执行触发之后可以使用. 3.SocketAsyncEventArgs 的事件还在 ...

  4. [JavaEE] SSH框架笔记_eclipse搭建SSH框架详解

    SSH框架是最常用的框架之一,在搭建SSH框架的时候总有人遇到这样,那样的问题.下面我介绍一下SSH框架搭建的全过程. 第一步:准备工作. 下载好eclipse,Struts2,Spring,Hibe ...

  5. ubuntu16.04 编译安装mysql5.7.x，以及配置使用

    編譯與安裝: 源码下载地址:http://dev.mysql.com/downloads/mysql/    选择Generic Linux (Architecture Independent), C ...

  6. MacOS显示和不显示隐藏文件

    defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder //显示隐藏文件 defaults wr ...

  7. 3D--知识点1

    三层架构 1.DAL(数据访问层)-->与数据库进行关联,对数据库进行增删改查操作2.BLL(业务逻辑层)-->负责加减乘除与或非操作,比如:用户注册3.UI/web(表示层) sqlse ...

  8. 《JavaScript高级程序设计》笔记——关于继承

    继承在JavaScript中是一种“奇葩”的存在,因为其本身并没有类(class)的概念(ES5),所以只能用其他方式(原型链.构造函数.对象实例)来模拟继承的行为.既然是模拟,那就应该是想办法实现继 ...

  9. 深入浅出ExtJS 第二章 Ext框架基础

    2.1 面向对象的基础架构(对象模型) 2.1.1 创建类 >.定义一个类: Ext.define('demo.Demo',{ name:'Lingo', hello:function () { ...

  10. 考上好大学，然后进入IT行业是穷人孩子晋级中产的唯一出路？

    今天看到一篇不错的文章,内容如下: 这个问题来自于我在知乎上参与的一个热贴讨论,作为一个10年的老码农,创业公司呆过,二.三流的互联网公司混过,BAT也遛了一趟,如今再次回归创业,经历算得上狗血了,看 ...