文档章节

HTML5之FileReader的使用

Yemon
 Yemon
发布于 2016/05/17 10:32
字数 1042
阅读 8
收藏 0

精选30+云产品,助力企业轻松上云!>>>

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。


FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

1.检测浏览器对FileReader的支持

[javascript]  view plain  copy
  1. if(window.FileReader) {  
  2.     var fr = new FileReader();  
  3.     // add your code here  
  4. }  
  5. else {  
  6.     alert("Not supported by your browser!");  
  7. }  


2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

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


3. 处理事件

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

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

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

[javascript]  view plain  copy
  1. fr.onload = function() {  
  2.     this.result;  
  3. };  


下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.         function showPreview(source) {  
  3.             var file = source.files[0];  
  4.             if(window.FileReader) {  
  5.                 var fr = new FileReader();  
  6.                 fr.onloadend = function(e) {  
  7.                     document.getElementById("portrait").src = e.target.result;  
  8.                 };  
  9.                 fr.readAsDataURL(file);  
  10.             }  
  11.         }  
  12.     </script>  
  13.   
  14. <input type="file" name="file" onchange="showPreview(this)" />  
  15.                                 <img id="portrait" src="" width="70" height="75">  

如果要限定上传文件的类型,可以通过文件选择器获取文件对象并通过type属性来检查文件类型

[javascript]  view plain  copy
  1. if(!/image\/\w+/.test(file.type)){  
  2.     alert("请确保文件为图像类型");  
  3.     return false;  
  4. }  

不难发现这个检测是基于正则表达式的,因此可以进行各种复杂的匹配,非常有用。

如果要增加一个进度条,可以使用HTML 5的progress标签,通过下面的代码实现。

[html]  view plain  copy
  1. <form>  
  2.     <fieldset>  
  3.         <legend>分度读取文件:</legend>  
  4.         <input type="file" id="File" />  
  5.         <input type="button" value="中断" id="Abort" />  
  6.         <p>  
  7.             <label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>  
  8.         </p>  
  9.         <p id="Status"></p>  
  10.     </fieldset>  
  11. </form>  

[javascript]  view plain  copy
  1. var h = {  
  2.     init: function() {  
  3.         var me = this;  
  4.            
  5.         document.getElementById('File').onchange = me.fileHandler;  
  6.         document.getElementById('Abort').onclick = me.abortHandler;  
  7.            
  8.         me.status = document.getElementById('Status');  
  9.         me.progress = document.getElementById('Progress');  
  10.         me.percent = document.getElementById('Percent');  
  11.            
  12.         me.loaded = 0;  
  13.         //每次读取1M  
  14.         me.step = 1024 * 1024;  
  15.         me.times = 0;  
  16.     },  
  17.     fileHandler: function(e) {  
  18.         var me = h;  
  19.            
  20.         var file = me.file = this.files[0];  
  21.            
  22.         var reader = me.reader = new FileReader();  
  23.            
  24.         //  
  25.         me.total = file.size;  
  26.            
  27.         reader.onloadstart = me.onLoadStart;  
  28.         reader.onprogress = me.onProgress;  
  29.         reader.onabort = me.onAbort;  
  30.         reader.onerror = me.onerror;  
  31.         reader.onload = me.onLoad;  
  32.         reader.onloadend = me.onLoadEnd;  
  33.         //读取第一块  
  34.         me.readBlob(file, 0);  
  35.     },  
  36.     onLoadStart: function() {  
  37.         var me = h;  
  38.     },  
  39.     onProgress: function(e) {  
  40.         var me = h;  
  41.            
  42.         me.loaded += e.loaded;  
  43.         //更新进度条  
  44.         me.progress.value = (me.loaded / me.total) * 100;  
  45.     },  
  46.     onAbort: function() {  
  47.         var me = h;  
  48.     },  
  49.     onError: function() {  
  50.         var me = h;  
  51.            
  52.     },  
  53.     onLoad: function() {  
  54.         var me = h;  
  55.    
  56.         if(me.loaded < me.total) {  
  57.             me.readBlob(me.loaded);  
  58.         } else {  
  59.             me.loaded = me.total;  
  60.         }  
  61.     },  
  62.     onLoadEnd: function() {  
  63.         var me = h;  
  64.            
  65.     },  
  66.     readBlob: function(start) {  
  67.         var me = h;  
  68.            
  69.         var blob,  
  70.             file = me.file;  
  71.            
  72.         me.times += 1;  
  73.            
  74.         if(file.webkitSlice) {  
  75.             blob = file.webkitSlice(start, start + me.step + 1);  
  76.         } else if(file.mozSlice) {  
  77.             blob = file.mozSlice(start, start + me.step + 1);  
  78.         }  
  79.            
  80.         me.reader.readAsText(blob);  
  81.     },  
  82.     abortHandler: function() {  
  83.         var me = h;  
  84.            
  85.         if(me.reader) {  
  86.             me.reader.abort();  
  87.         }  
  88.     }  
  89. };  
  90.    
  91. h.init();  
Yemon
粉丝 10
博文 322
码字总数 23853
作品 0
广州
架构师
私信 提问
加载中
请先登录后再评论。
FileReader实现上传图片前本地预览

  平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上。或者使用前端插件。这篇博客使用的是HTML5的新特性——FileReader。由于兼容性,这种...

osc_3om50641
2018/08/19
0
0
vue中图片批量上传

首先说一下会用到几个知识点 1. event.target.files[0] 获取的是上传的图片的一些参数如下图: 可以自己依次打印看看 console.log(event, event.target, event.target.files, event.target....

osc_v8xs2czi
2018/09/11
0
0
HTML5 实现图片预览和查看原图

html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码。在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取...

梦想编程
07/04
6
0
FileReader实现上传图片前本地预览

  平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上。或者使用前端插件。这篇博客使用的是HTML5的新特性——FileReader。由于兼容性,这种...

辛月
2018/08/19
0
0
Html5 FileReader 对文件进行Base64编码

以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Base64数据格式的Url了,利...

葡萄城控件技术团队
2014/06/11
116
0

没有更多内容

加载失败,请刷新页面

加载更多

4.17. HTTP 请求走私

文章目录 4.17. HTTP 请求走私 4.17.1. 简介 4.17.2. 成因 4.17.3. 分类 4.17.4. 攻击 4.17.4.1. CL不为0的GET请求 4.17.4.2. CL-CL 4.17.4.3. CL-TE 4.17.4.4. TE-CL 4.17.4.5. TE-TE 4.17......

osc_2wq8ft8d
25分钟前
11
0
2020年蓝桥杯B组个人题解(热的,不知道对错)

文章目录 A B C D E F G H I J 总结 现在是蓝桥杯刚结束,趁着有记忆,写下这篇博客,不知道对错,如果我错了,请指出。 A 因为是到0就结束了,那么每次看看-600是否结束,如果没有结束就+30...

osc_1m04dwae
25分钟前
0
0
AXI4_full协议详解

AXI4-full协议介绍 AXI4.0-full包含突发控制信号,所以可以进行突发传输,在只指定一次地址后,可以一次传输多达256个数据(数据的宽度取决于带宽)。主要用于往DDR或者OCM中写入大量数据时使用...

whoisliang
26分钟前
8
0
【VMWare虚拟机Centos7安装配置redis及Redis常用命令合集】

前置依赖 1.Redis依赖gcc和tcl环境,所以要先安装gcc和tcl 执行下面语句安装gcc: yum install gcc-c++ 若提示是否继续,输入y继续安装 执行下面语句安装tcl: yum install -y tcl 下载red...

osc_s4durjz5
26分钟前
10
0
LeetCode 323. 无向图中连通分量的数目(并查集)

文章目录 1. 题目 2. 解题 1. 题目 给定编号从 0 到 n-1 的 n 个节点和一个无向边列表(每条边都是一对节点),请编写一个函数来计算无向图中连通分量的数目。 示例 1:输入: n = 5 和 edge...

osc_lk0wespa
27分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部