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. js和jquery的DOM事件大全

  2. Comparison method violates its general contract

    生产环境出现的错误排查,错误log如下 java.lang.IllegalArgumentException: Comparison method violates its general contr ...

  3. java 输入输出 函数对象构造

    /*********************输入输出*******************/   //输入字符串 不包括最后的换行符'\n'     import java.io.BufferedRe ...

  4. 基于 Equinox 的 OSGi Console 的研究和探索

    自定制 OSGi Console 进行组建和服务生命周期管理模块化编程的好处已经很好地被理解了约 40 年,但在 OSGi 之前,开发人员不得不自己发明模块化设计和系统.随着软件应用体系结构的不断发展 ...

  5. bootstrap表格多样式及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  6. [原创] Web UI自动化应用测试框架实践 - 概览

    之前为我们部门做的一个UI框架.不能纯粹解读为框架,主要是做了一些简单的分层设计,以解决稳定性.降低复杂性.提升可维护性以及快速构建测试用例等实际问题. 主要部分:1. 测试数据.主要提供测试类库需要 ...

  7. java产生不重复的随机数

    /** *产生9位不同的随机数 */ private String getRandomString(){ StringBuffer sb = new StringBuffer(); for(int i ...

  8. poj 3689 树形dp

    思路: 每个点有三种状态,本身有塔,被子节点的塔覆盖,被父节点的塔覆盖. #include<map> #include<set> #include<cmath> # ...

  9. noi 97 积木游戏

    思路:黑书的例题 #include<map> #include<set> #include<cmath> #include<queue> #includ ...

  10. C#导出数据至excel模板

    开源分享最近一个客户要做一个将数据直接输出到指定格式的Excel模板中,略施小计,搞定 其中包含了对Excel的增行和删行,打印预览,表头,表体,表尾的控制 using System; using S ...