文档章节

HTML5之FileReader的使用

Yemon
 Yemon
发布于 2016/05/17 10:32
字数 1042
阅读 3
收藏 0
点赞 2
评论 0
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();  

本文转载自:http://blog.csdn.net/hj7jay/article/details/51167640

共有 人打赏支持
Yemon
粉丝 10
博文 320
码字总数 22799
作品 0
广州
架构师
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

Safari无痕模式下,storage被禁用问题

前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...

ITgecko ⋅ 05/02 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

HTML5 Web 存储

HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速...

wybo521 ⋅ 2016/01/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 34分钟前 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 54分钟前 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部