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. Transact-SQL三值逻辑

    /*===========================<一>========================== 在SQL中逻辑表达式的值有三种: 1.TRUE 2.FALSE 3.U ...

  2. 【阿里云产品公测】结构化数据服务OTS之JavaSDK初体验

    [阿里云产品公测]结构化数据服务OTS之JavaSDK初体验 作者:阿里云用户蓝色之鹰 一.OTS简单介绍 OTS 是构建在阿里云飞天分布式系统之上的NoSQL数据库服务,提供海量结构化数据的存储和实 ...

  3. android refbase类

    在Android的源代码中,经常会看到形如:sp<xxx>.wp<xxx>这样的类型定义,这其实是Android中的智能 指针.智能指针是C++中的一个概念,通过基于引用计数的 ...

  4. 【Mood-7】tell 2 my gf-miss u not sudden but always

    #sorry not coming 2 see u the national day holiday! I'm BULL in the land,fighting 4 u and babies!  # ...

  5. Android小项目之二 代码的组织结构

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...

  6. 使用 xcode 8 构建版本 iTunes Connect 获取不到应用程序的状态

    今天在提交 APP 审核版本的时候iTunes Connect 一直获取不到应用程序的状态,原因是,14号 xcode 8一出 直接升级使用 xcode 8 打包发布包,然后直接用 xcode8 构建 ...

  7. Oracle基础 PL-SQL编程基础（1） 变量和常量

    一.什么是PL-SQL PL-SQL是结合了Oracle过程语言和结构化查询语言(SQL)的一种扩展语言.具体来说,PL-SQL就是在普通的SQL语句的基础上增加了编程语言的特点,将数据操作和查询语句 ...

  8. 浅析vb.net与vb6的不同

    vb6.0与vb.net 都是微软公司推出的编程工具,而vb.net是在vb6的基础上发展而来的,其语法与VB6.0相似,但VB.net并不是VB6.0 的简单升级,而是增加了更多特性,其中重要的一点 ...

  9. xml格式化成json

    JsonConvert.SerializeObject(model)   XmlDocument doc = new XmlDocument();                    doc.Loa ...

  10. 非常棒的 「Sublime Text 配色/主题」与「编程字体」

    *标有 CT 的是配色 **主题中调用的字体和相配套的Sublime主程序图标可访问GitHub获取 Afterglow https://github.com/YabataDesign/aftergl ...