FileReader用来把文件读入内存，并且读取文件中的数据。
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

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接口的使用

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

HTML5之FileReader文件读取接口的更多相关文章

  1. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  2. FileReader文件读取API

    :用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 1.FileReader接口的方法 Fi ...

  3. jmeter接口性能测试【CSV文件读取+接口关联+设置集合点】

    一.前言 周计划上安排了个接口性能测试的任务,便开始了职业生涯的第一个接口性能测试... 接口进行压测之前,首先需要调通脚本.有两种方式,一种是通过抓包工具(如fiddler)抓取业务接口:另一种是通 ...

  4. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  6. HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...

  7. html5中利用FileReader来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

  8. FileReader：读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

  9. 前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

随机推荐

  1. VULKAN学习资料

    1,中文开发教程:https://www.cnblogs.com/heitao/p/7193853.html

  2. ps命令详解

    1.简介: ps 命令有两种不同的语法风格 —— BSD 与 UNIX 两种风格.新手常常对这两种形式产生误解,因此我们有必要在这里作一个简单的说明: ps aux 与 ps -aux 是不同的,例如 ...

  3. 把post请求的地址粘贴到浏览器地址栏敲回车报错405[Method Not Allowed]

    为什么把post请求的地址粘贴到浏览器地址栏敲回车会报405?原因:在浏览器地址栏敲回车,浏览器默认是以get方式发送请求,而你的请求是post,这样当然会报405了: 405:方法不允许,不支持ge ...

  4. win10 下安装 neo4j（转）

    1.neo4j介绍 neo4j是基于Java语言编写图形数据库.图是一组节点和连接这些节点的关系.图形数据库也被称为图形数据库管理系统或GDBMS.详细介绍可看Neo4j 教程 2.安装Java jd ...

  5. C++ 迭代器的使用和操作

    迭代器是一种检查容器内元素并遍历元素的数据类型.C++更趋向于使用迭代器而不是下标操作,因为标准库为每一种标准容器(如vector)定义了一种迭代器类型,而只用少数容器(如vector)支持下标操作访 ...

  6. SpringBoot的spring-boot-starter有哪些(官方)

    看完这些,你就知道每个spring-boot-starter依赖些什么东西了. 地址:https://github.com/spring-projects/spring-boot/tree/v2.1. ...

  7. Django 学生信息 添加 功能 遇到的问题.

    1  添加 班级信息时的问题 (grade为外键) 原因是 grade 必需接收 一个 实例, 而我交是一个 str字符串, if request.method == 'POST': data = { ...

  8. Zabbix告警脚本-短信

    [root@iot-svndata02 bin]# cat zbsms.sh #!/bin/sh #curl http://221.179.180.137:8080/smsaServer/lkSend ...

  9. JVM 字节码（一）字节码规范

    JVM 字节码(一)字节码规范 JVM 学习资源 Java ClassFile 字节码规范(Oracle) Java 虚拟机规范(Java SE 7 中文版) (周志明等译) Java 反编译工具 - ...

  10. window 安装mysql

    常见错误:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 密码输入错误:无法远程 ...