FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

了解https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

1、FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

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

2、. 处理事件
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态。

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

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

读取文件代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     var result=document.getElementById("result");
  10.     var file=document.getElementById("file");
  11.  
  12.     //判断浏览器是否支持FileReader接口
  13.     if(typeof FileReader == 'undefined'){
  14.         result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
  15.         //使选择控件不可操作
  16.         file.setAttribute("disabled","disabled");
  17.     }
  18.  
  19.     function readAsDataURL(){
  20.         //检验是否为图像文件
  21.         var file = document.getElementById("file").files[0];
  22.         if(!/image\/\w+/.test(file.type)){
  23.             alert("看清楚，这个需要图片！");
  24.             return false;
  25.         }
  26.         var reader = new FileReader();
  27.         //将文件以Data URL形式读入页面
  28.         reader.readAsDataURL(file);
  29.         reader.onload=function(e){
  30.             var result=document.getElementById("result");
  31.             //显示文件
  32.             result.innerHTML='<img src="' + this.result +'" alt="" />';
  33.         }
  34.     }
  35.  
  36.     function readAsBinaryString(){
  37.         var file = document.getElementById("file").files[0];
  38.         var reader = new FileReader();
  39.         //将文件以二进制形式读入页面
  40.         reader.readAsBinaryString(file);
  41.         reader.onload=function(f){
  42.             var result=document.getElementById("result");
  43.             //显示文件
  44.             result.innerHTML=this.result;
  45.         }
  46.     }
  47.  
  48.     function readAsText(){
  49.         var file = document.getElementById("file").files[0];
  50.         var reader = new FileReader();
  51.         //将文件以文本形式读入页面
  52.         reader.readAsText(file);
  53.         reader.onload=function(f){
  54.             var result=document.getElementById("result");
  55.             //显示文件
  56.             result.innerHTML=this.result;
  57.         }
  58.     }
  59. </script>
  60. <p>
  61.     <label>请选择一个文件：</label>
  62.     <input type="file" id="file" />
  63.     <input type="button" value="读取图像" onclick="readAsDataURL()" />
  64.     <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
  65.     <input type="button" value="读取文本文件" onclick="readAsText()" />
  66. </p>
  67. <div id="result" name="result"></div>
  68. </body>
  69. </html>

简单的上传实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>html5filereader上传图片</title>
  6.     <script type="text/javascript">
  7.         var loadImageFile = (function () {
  8.             if (window.FileReader) {
  9.                 var    oPreviewImg = null,
  10.                         oFReader = new window.FileReader(),//创建对象
  11.                         rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
  12.                 oFReader.onload = function (oFREvent) {
  13.                     console.log(!oPreviewImg);//true
  14.                     if (!oPreviewImg) {
  15.                         var newPreview = document.getElementById("imagePreview");
  16.                         oPreviewImg = new Image();
  17.                         oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
  18.                         oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
  19.                         newPreview.appendChild(oPreviewImg);
  20.                     }
  21.                     oPreviewImg.src = oFREvent.target.result;
  22.                     document.getElementById('result').innerHTML="<img src='"+oFREvent.target.result+"'>"
  23.                 };
  24.  
  25.                 return function () {
  26.                     var aFiles = document.getElementById("imageInput").files;
  27.                     console.log(aFiles);
  28.                     if (aFiles.length === 0) { return; }
  29.                     if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
  30.                     oFReader.readAsDataURL(aFiles[0]);
  31.                 }
  32.             }
  33.             if (navigator.appName === "Microsoft Internet Explorer") {
  34.                 return function () {
  35.                     document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
  36.  
  37.                 }
  38.             }
  39.         })();
  40.     </script>
  41.     <style type="text/css">
  42.         #imagePreview {
  43.             width: 160px;
  44.             height: 120px;
  45.             float: right;
  46.             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  47.         }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52. <div id="imagePreview"></div>
  53.  
  54. <form name="uploadForm">
  55.     <div id="result"></div>
  56.     <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
  57.         <input type="submit" value="Send" /></p>
  58. </form>
  59. </body>
  60. </html>

浅谈FileReader的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  3. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  4. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

  5. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  6. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  7. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  8. iOS开发之浅谈MVVM的架构设计与团队协作

    今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...

  9. Linux特殊符号浅谈

    Linux特殊字符浅谈 我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...

随机推荐

  1. JS中移除非数字,最多保留一位小数

    //去除非数字 var clearNoNum = function (item) { if (item!=null && item!=undefined) { //先把非数字的都替换掉 ...

  2. 如何使用jQuery实现根据不同IP显示不同的内容

    一些SEM的投放页会针对不同地域做针对性的内容推广,下面我把实现方法分享出来. 一.引用新浪提供的IP查询的js库 <script src="http://int.dpool.sina ...

  3. A - 畅通工程 （并查集）

    点击打开链接 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连 ...

  4. 【Oracle 12c】CUUG OCP认证071考试原题解析（35）

    35.choose the best answer View the Exhibit and examine the description of the EMPLOYEES table. Evalu ...

  5. layui select 禁止点击

    $('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...

  6. jquery源码解析：addClass，toggleClass，hasClass详解

    这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...

  7. finally语句块一定会执行吗？

    public class SystemExitAndFinally { public static void main(String[] args) { try{ System.out.println ...

  8. jenkins发送测试报告邮件

     1.安装插件 Email Extension Plugin 2.设置Extended E-mail Notification a."系统管理"--“系统设置”.配置Extende ...

  9. linux 命令 htop & 重定向 top， bashrc文件

    最近在用linux服务器跑程序,有几条linux命令还蛮重要的,总结一下: 1. 直接跑代码: python test.py 2. 若想程序在后台跑,即使本地和服务器断开也能运行: nohup pyt ...

  10. 通过MSI解压缩Cab文件

    迁移自我的Github 如果只是想做类似解压缩的操作,那么可以使用如下命令行 C:\Windows\System32\expand.exe <cab file path> -F:* < ...