HTML5(FileRdeader)
主要作用:
异步读取存储在用户计算机上的文件(或原始缓冲区的内容),使用File或Blob对象指定要读取的文件或数据。其中File是input元素上选择文件后返回的FileList对象,也可以是拖放操作生成的DataTransfer对象,还可以是来自HTMLCanvasElement上执行mozGetAsFile()方法后返回的结果。
创建实例:
var reader = new FileReader();//构造函数返回一个新构造的FileReader
方法:
abort():void终止文件读取操作,在返回时,readyState属性为DONE
readAsArrayBuffer(file):void异步按字节读取文件内容,一旦完成,result属性中保存的结果用ArrayBuffer对象表示
readAsBinaryString(file):void异步按字节读取文件,result属性中结果为文件的二进制串
readAsDataURL(file):void异步读取文件内容,一旦完成,result属性中将用data:url的字符串形式表示
readAsText(file,encoding):void异步按字符串读取文件内容,result属性中结果以字符串形式表示
事件:
onabort当读取操作被终止的时调用
onerror当读取操作发生错误时调用
onload当读取操作成功完成时调用
onloadend当读取操作完成时调用,不管成功还是失败
onloadstart当读取操作将要开始之前调用
onprogress在读取数据过程中周期性调用
读取方式:
readAsArrayBuffer读取文件后会在内存中创建一个ArrayBuffer对象(二进制缓冲区),将二进制数据放进去。通过这种方式可以直接在网络中传输二进制内容。
ArrayBuffer中的内容对外是不可见的,要查看其中的内容就要引入另一概念:类型化数组。
readAsBinaryString readAsDataURL用这个可以不经过后台,直接将本地图片显示在页面上。这样可以减少前后端频繁的交互过程,减少服务器端无用的图片资源。
readAsText读取文件的单位是字符,因此对于文本文件只要按规定的编码方式读取即可。
二进制数据上传
HTML5体系的建立引入一大堆的新东西,基于XHR2,我们可以直接上传或下载二进制内容,无需像以往一样通过form标签由后端拉取二进制内容。
简单整理下上传逻辑:
1、通过input[type="file"]标签获取本地文件File对象
2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
3、创建xhr对象,配置请求信息
4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
代码实现如下:
var input = document.getElementById("file");// input file
input.onchange = function(){
/*FILE API使访问包含File对象的FileList成为可能,FileList代表被用户选择的文件,当用户选择一个文件时,handleFiles()方法会被调用,同时传入包含File对象的FileList,File是用户选中的文件。如果想让用户选择多个文件<input type="file" id="input" multiple>*/
var file = this.files[0];
if(!!file){
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(){
var binary = this.result;
upload(binary);
}
}
} //文件上传
function upload(binary){
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx/opload");
xhr.overrideMimeType("application/octet-stream");
//直接发送二进制数据
if(xhr.sendAsBinary){
xhr.sendAsBinary(binary);
}else{
xhr.send(binary);
} // 监听变化
xhr.onreadystatechange = function(e){
if(xhr.readyState===4){
if(xhr.status===200){
// 响应成功
}
}
}
HTML5(FileRdeader)的更多相关文章
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
随机推荐
- 学习 Spring (七) Resource
Spring入门篇 学习笔记 Resource: Spring 针对资源文件的统一接口 UrlResource: URL 对应的资源,根据一个 URL 地址即可构建 ClassPathResource ...
- codeforces546C
Soldier and Cards CodeForces - 546C Two bored soldiers are playing card war. Their card deck consist ...
- [HAOI2007] 修筑绿化带
类型:单调队列 传送门:>Here< 题意:给出一个$M*N$的矩阵,每一个代表这一格土地的肥沃程度.现在要求修建一个$C*D$的矩形花坛,矩形绿化带的面积为$A*B$,要求花坛被包裹在绿 ...
- 【BZOJ3997】【TJOI2015】组合数学 Dilworth定理 DP
题目描述 有一个\(n\times m\)的网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完. 此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子 ...
- Java实现一个双向链表的倒置功能
题目要求:Java实现一个双向链表的倒置功能(1->2->3 变成 3->2->1) 提交:代码.测试用例,希望可以写成一个Java小项目,可以看到单元测试部分 该题目的代码, ...
- Nagios 监控 Mysql
被监控机的Mysql监控创建专用数据库.专用数据库账户mysql -uroot -pcreate database nagios_monitor;grant select on nagios_moni ...
- python3 函数function
def function(arg): pass 变量: 由字母.数字和下划线构成,不能以数字开头,不能任意特殊字符 变量定义规范,使用驼峰式或者下划线式格式 变量定义尽量简明,易懂,方便使用者应用 作 ...
- linux中,使用cat、head、tail命令显示文件指定行
小文件可以用cat(也可以用head.tail) 显示文件最后20行:cat err.log | tail -n 20 显示文件前面20行:cat err.log | head -n 20 从20行开 ...
- kafka清理数据日志
背景问题: 使用kafka的路上踩过不少坑,其中一个就是在测试环境使用kafka一阵子以后,发现其日志目录变的很大,占了磁盘很大空间,定位到指定目录下发现其中一个系统自动创建的 topic,__con ...
- webpack入门(四)webpack的api 2 module
接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory) 这些选项影响普通的模块 m ...