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. seleniu IDE 点点滴滴

    在使用selenium webdriver +python 的过程中遇见了许多的问题,这些问题在网上都没有找到很好的答案,后来在看selenium IDE的时候发现这里面有很好的解决方法,写写.记记. ...

  2. 2015 FVDI V6.3 Software Free Download

    2015 FVDI with software USB dongle has newly upgraded to V6.3. Here software upgrade list: ABRITES C ...

  3. MySQL（25）：事务的隔离级别出现问题之 不可重复读

    1. 不可重复读 所谓的不可重复读(Non-Repeatable Read)是指事务中两次查询的结果不一致,原因是在查询的过程中其他事务做了更新的操作. 例如,银行在做统计报表的时候,第一次查询a账户 ...

  4. 【Linux/Ubuntu学习 7】E: 无法获得锁 /var/lib/dpkg/lock – open (11: 资源暂时不可用) E: 无法锁定管理目录

    在用sudo apt-get install 安装软件时,由于速度太慢,想换个软件源,直接关闭了终端,apt-get但进程没有结束,结果终端提示 :“E: 无法获得锁 /var/lib/dpkg/lo ...

  5. oracle优化辅助SQL语句

    --查询正在执行的SQL语句 select a.program, b.spid, c.sql_text,c.SQL_FULLTEXT,c.SQL_ID from v$session a, v$proc ...

  6. Win10环境下使用VS2015编译PJProject

    一.pjproject源码下载 下载地址:http://www.pjsip.org/ 二.编译之前 1.pj配置,通常直接复制并重命名config_site_simple.h为config_site. ...

  7. Shodan！

    Shodan! 简介 首先先介绍一下Shodan CNNMoney的一篇文章写道,虽然目前人们都认为谷歌是最强劲的搜索引擎,但Shodan才是互联网上最可怕的搜索引擎. 与谷歌不同的是,Shodan不 ...

  8. ShowModal在FireMonkey移动应用程序对话框

    This is the only code that changes between the first and second code snippets: dlg.ShowModal(procedu ...

  9. 剑指Offer32 丑数

    /************************************************************************* > File Name: 32_UglyNu ...

  10. hdu-5597 GTW likes function(欧拉函数+找规律)

    题目链接: GTW likes function Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 131072/131072 K (J ...