HTML5 FileReader读取Blob对象API详解
使用FileReader
对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File
对象或者Blob
对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个<input>
元素上选择文件后返回的FileList
对象,也可以来自由拖放操作生成的 DataTransfer
对象,还可以是来自在一个HTMLCanvasElement
上执行mozGetAsFile()方法后的返回结果。
创建FileReader对象,
var reader = new FileReader();
属性:
1.result jsval 读取的文件内容,这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作发起的方法。只读
2.readyState unsigned short 当前状态值,0---EMPTY 还没有记载任何数据。1--LOADING 正在被记载。2---DONE 已完成全部的读取请求。
3.error DOMError 在读取文件时发生的错误,只读。
方法:
void abort() ,中止读取操作,返回时,readyState属性值为DONE
void readAsArrayBuffer( in Blob blob), 读取文件为 ArrayBuffer
void readAsBinaryString(in Blob blob),读取文件为二进制字符串,IE浏览器不支持该方法
void readAsDataURL(in Blob blob),读取文件为DataURL ,关于DataURL
void readAsText(in Blob blob,[optional] in DOMString encoding),指定文件编码(默认值utf-8),读取Blob为字符串
事件监听:
onabort
当读取操作被终止时调用.
onerror
当读取操作发生错误时调用.
onload
当读取操作成功完成时调用.
onloadend
当读取操作完成时调用,不管是成功还是失败.该处理程序在onload
或者onerror之后调用
.
onloadstart
当读取操作将要开始之前调用.
onprogress
在读取数据过程中周期性调用.
事件传递的参数对象:
//e.target FileReader
//e.total 文件总大小,字节
//e.type 上传状态‘load’
//e.timeStamp 还不知道
浏览器兼容性
Desktop、Mobile
Feature | Firefox (Gecko) | Chrome | Internet Explorer* | Opera* | Safari |
---|---|---|---|---|---|
Basic support | 3.6 (1.9.2) | 7 | 10 | Not supported | Not supported |
*IE9有一个File API Lab.Opera从11.10开始部分支持该API.
实例1,检测浏览器是否支持FileReader
//1.检测浏览器是否支持FileReader
//测试结果,IE>=10,Google,FF
if (window.FileReader) {
var fr = new FileReader();
console.info(fr);
} else {
alert("Not supported by your browser!");
}
实例2. FileReader读取File对象,读取文件实例
<div class="container">
<input type="file" id="file" multiple />
<input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
<h4>
选择文件如下:
</h4>
<blockquote></blockquote>
</div>
var fileBox = document.getElementById('file');
function showFiles() {
//获取选择文件的数组
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
readFile(file);
}
}
//读取文件内容
//reader.readAsArrayBuffer //将读取结果 封装成 ArrayBuffer ,如果想使用一般需要转换成 Int8Array或DataView
//reader.readAsBinaryString //在IE浏览器中不支持改方法
//reader.readAsText 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8
//reader.readAsDataURL //读取结果为DataURL
//reader.readyState 上传中的状态
function readFile(file) {
var reader = new FileReader();
//reader.readAsText(file);
//中文windows系统 txt 文本多数默认编码 gbk
reader.readAsText(file, 'gbk');
console.info(reader.readyState); // 状态值 1
reader.onload = function (e) {
console.info(e); //事件对象
//e.target FileReader
//e.total 文件总大小,字节
//e.type 上传状态‘load’
//e.timeStamp 还不知道 console.info(reader.readyState); //状态值 2
var result = reader.result;
$('.container blockquote').text(result);
}
}
更多实例:
HTML5 FileReader读取Blob对象API详解的更多相关文章
- document,element,dom对象api详解
Document对象: 根元素的访问,也就是HTML标签的访问.使用document.documentElement访问根对象. 使用Document对象查找对象 getElementById():通 ...
- 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
- hibernate学习(2)——api详解对象
1 Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...
- Java8学习笔记(五)--Stream API详解[转]
为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...
- DOM API详解
来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...
- Lucene系列六:Lucene搜索详解(Lucene搜索流程详解、搜索核心API详解、基本查询详解、QueryParser详解)
一.搜索流程详解 1. 先看一下Lucene的架构图 由图可知搜索的过程如下: 用户输入搜索的关键字.对关键字进行分词.根据分词结果去索引库里面找到对应的文章id.根据文章id找到对应的文章 2. L ...
- 大数据学习笔记——Spark工作机制以及API详解
Spark工作机制以及API详解 本篇文章将会承接上篇关于如何部署Spark分布式集群的博客,会先对RDD编程中常见的API进行一个整理,接着再结合源代码以及注释详细地解读spark的作业提交流程,调 ...
- OpenGL ES: (4) EGL API详解 (转)
上一节我们初步学习了 OpenGL ES.EGL.GLSL 的相关概念,了解了它们的功能,以及它们之间的关联.我们知道了 EGL 是绘制 API(比如 OpenGL ES)与 底层平台窗口系统之间的接 ...
- Java 8 Stream API详解--转
原文地址:http://blog.csdn.net/chszs/article/details/47038607 Java 8 Stream API详解 一.Stream API介绍 Java8引入了 ...
随机推荐
- 防止 DDoS 攻击的五个「大招」!
提到 DDoS 攻击,很多人不会陌生.上周,美国当地时间 12 月 29 日,专用虚拟服务器提供商 Linode 遭到 DDoS 攻击,直接影响其 Web 服务器的访问,其中 API 调用和管理功能受 ...
- PHP日常杂记
1.php点击按钮跳转页面 <input type="button" onclick="window.location.href='login.php'" ...
- Duplex Services (Msdn)
Duplex Services from msdn A duplex service contract is a message exchange pattern in which both endp ...
- [LeetCode#271] Encode and Decode Strings
Problem: Design an algorithm to encode a list of strings to a string. The encoded string is then sen ...
- bzoj1706
倍增好题,f[p,i,j]表示i到j经过了2^p条边走过的最短路径显然f[p+1]可以由f[p]转移来然后对n二进制拆分累加即可 ; ..,..] of int64; f,pf:..] of int6 ...
- Node.js权威指南 (7) - 实现基于TCP与UDP的数据通信
7.1 使用net模块实现基于TCP的数据通信 / 136 7.1.1 创建TCP服务器 / 136 7.1.2 socket端口对象 / 142 7.1.3 创建TCP客户端 / 151 7.1.4 ...
- canvas——画板
注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...
- [转载] cookie、JS记录及跳转到页面原来的位置
额....如下 <!-- 定位页面的 Cookie function SetCookie(sName, sValue) { date = new Date(); s = date.getDate ...
- 学习嵌入式Linux有没有一个最佳的顺序(持续更新)
作为一个嵌入式Linux的初学者,我知道我可能将长期处于初学者阶段,因为我至今仍然没有能够摸索出一条很好的道路让我由初学者进入到更高级阶段.但是我始终没有放弃,本篇文章就是用来记录我学习嵌入式Linu ...
- 待解决)leetcode 路径和 dfs 线序遍历
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...