H5文件操作API
引言
在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立,不够通用。在HTML5标准中,默认提供了操作文件的API让这一切直接标准化。有了操作文件的API,让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作,让Web应用不再那么蹩脚,而之前Web应用如果不借助第三方插件,那就是个shit!但是最新的标准中大部分浏览器都已经实现了文件的读取API,文件的写入,文件和文件夹的最新的标准刚制定完毕,相信后面随着浏览器的升级这些功能肯定会实现的非常好,接下来我主要给大家介绍文件读取的几个API。
几个重要的JS对象
1):FileList对象
它是File对象的一个集合,在Html4标准中文件上传控件只接受一个文件,而在新标准中,只需要设置multiple,就支持多文件上传,所以从此标签中获取的files属性就是FileList对象实例。demo:<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /> ;下面是关于FileList对象的API的原型:
interface FileList {
getter File? item(unsigned long index);
readonly attribute unsigned long length;
};
2)Blob对象
其实就是一个原始数据对象,它提供了slice方法可以读取原始数据中的某块数据。另外有两个属性:size(数据的大小),type(数据的MIME类型);看下面的是W3C的API原型:
interface Blob { readonly attribute unsigned long long size;
readonly attribute DOMString type; //slice Blob into byte-ranged chunks
Blob slice(optional long long start,
optional long long end,
optional DOMString contentType); };
3)File对象
继承自Blob对象,指向一个具体的文件,它还有两个属性:name(文件名), lastModifiedDate(最后修改时间);然后让我们看一些W3C的标准:
interface File : Blob { readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;
};
4)FileReader对象
设计用来读取文件里面的数据,提供三个常用的读取文件数据的方法,另外读取文件数据使用了异步的方式,非常高效。然后让我们看一些W3C的标准:
[Constructor]
interface FileReader: EventTarget { // async read methods
void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString encoding);
void readAsDataURL(Blob blob); void abort(); // states
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2; readonly attribute unsigned short readyState; // File or Blob data
readonly attribute any result; readonly attribute DOMError error; // event handler attributes
attribute [TreatNonCallableAsNull] Function? onloadstart;
attribute [TreatNonCallableAsNull] Function? onprogress;
attribute [TreatNonCallableAsNull] Function? onload;
attribute [TreatNonCallableAsNull] Function? onabort;
attribute [TreatNonCallableAsNull] Function? onerror;
attribute [TreatNonCallableAsNull] Function? onloadend; };
这个对象是非常重要第一个对象,它提供了四个读取文件数据的方法,这些方法都是异步的方式读取数据,读取成功后就直接将结果放到属性result中。所以一般就是直接读取数据,然后监听此对象的onload事件,然后在事件里面读取result属性,再做后续处理。当然abort就是停止读取的方法。其他的就是事件和状态不再赘述。
三个方法都介绍一下:
readAsBinaryString(Blob blob); → 传入一个Blob对象,然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。
readAsText(Blob blob, optional DOMString encoding);→第一个参数传入Blog对象,然后第二个参数传入编码格式,异步将数据读取成功后放到result属性中,读取的内容是普通的文本字符串的形式。
readAsDataURL(Blob blob);→传入一个Blob对象,读取内容可以做为URL属性,也就是说可以将一个图片的结果指向给一个img的src属性。
读取文件上传控件里的文件并将内容已不同的方式展现到浏览器里面实例
在展示代码之前,之前我们操作一个图片文件,都是先将图片上传到服务器端,然后再使用一个img标签指向到服务器的url地址,然后再进行一个使用第三方插件进行图片处理,而现在这一切都不需要服务器端了,因为FileReader对象提供的几个读取文件的方法变得异常简单,而且全不是客户端js的操作。且看下面的demo:
案例一:获取上传文件的文件名(在线演示地址)
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < title ></ title > < script src="Scripts/jquery-1.5.1.js" type="text/javascript"></ script > < script type="text/javascript"> $(function () { $("#btnGetFile").click(function (e) { var fileList = document.getElementById("fileDemo").files; for (var i = 0; i < fileList.length ; i++) { if (!(/image\/\w+/.test(fileList[i].type))) { $("#result").append("<span>type:"+fileList[i].type+"--******非图片类型*****--name:"+fileList[i].name+"--size:"+fileList[i].size+"</ span >< br />"); } else { $("#result").append("< span >type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</ span >< br />"); } } }); }); </ script > </ head > < body > < form action="/home/index" method="POST" novalidate="true"> < input type="file" multiple="multiple" name="fileDemo" id="fileDemo" />< br /> < input type="button" value="获取文件的名字" id="btnGetFile"/> < div id="result"></ div > </ form > < hr /> </ body > </ html > |
案例二:读取上传文件内容,然后将文件内容直接读取到浏览器上(在线演示地址)
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < title ></ title > < script src="Scripts/jquery-1.5.1.js" type="text/javascript"></ script > < script type="text/javascript"> if(typeof FileReader == "undified") { alert("您老的浏览器不行了!"); } function showDataByURL() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsDataURL(resultFile); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += "< img src='" + urlData + "' alt='" + resultFile.name + "' />"; }; } } function showDataByBinaryString() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); //异步方式,不会影响主线程 reader.readAsBinaryString(resultFile); reader.onload = function(e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } function showDataByText() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsText(resultFile,'gb2312'); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } </ script > </ head > < body > < input type="file" name="fileDemo" id="fileDemo" multep/> < input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/> < input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/> < input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/> < div id="result"> </ div > </ body > </ html > |
总结
有了文件操作的API后,让JS进一步的操作本地文件的得到空前的加强,HTML5对于客户端Web应用得到进一步功能的提升,HTML5的趋势让Web更加富客户端化,而这些都需要让我们的HTML或者JS变得更加强大,而HTML5正是适时地推出了File API!
作者:FlyDragon
出处:http://www.cnblogs.com/fly_dragon/
延伸:
javascript 使用Html5 File Api进行文件读取
通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)
H5文件操作API的更多相关文章
- paip.复制文件 文件操作 api的设计uapi java python php 最佳实践
paip.复制文件 文件操作 api的设计uapi java python php 最佳实践 =====uapi copy() =====java的无,要自己写... ====php copy ...
- HTML5文件操作API
HTML5文件操作API 一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...
- 文件的概念以及VC里的一些文件操作API简介
文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文 ...
- Html5 学习系列(四)文件操作API
原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...
- Java文件操作API功能与Windows DOS命令和Linux Shell 命令类比
Java文件操作API功能与Windows DOS命令和Linux Shell 命令类比: Unix/Linux (Bash) Windows(MS-DOS) Java 进入目录 cd cd - 创建 ...
- HTML5 文件操作API
简介 我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便.从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进.存储二进制数据或与其进行交互不应局限于桌面. ...
- nodejs模块fs——文件操作api
// fs模块常用api // 读取文件 .写入文件 .追加文件. 拷贝文件 .删除文件 // 读取文件 // fs.readFile(path[, options], callback) // fs ...
- H5文件操作api--持续完善中
Drop Here <input type="file" onchange="upload(this)" /></p> <div ...
- 【Egret】实现web页面操作PC端本地文件操作
Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...
随机推荐
- Lo-Dash – 替代 Underscore 的优秀 JS 工具库
前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...
- [Matlab] Galois Field
1. gf(M)用来把M转换到伽罗华域 2. gf(M.x)用来把M转换到实数域
- 设计模式之Iterator模式(2)
这篇文章比较简单,作一个笔记. 模拟Iterator. Iterator接口: package cn.asto.Interator; public interface Iterator { publi ...
- jquery选择器(原创)<三>
现在来看看表单域选择器 1.:input选择器 :input选择器,用于选择所有Input,textarea,select和button元素,语法格式如下: $(":input") ...
- 关于SqlServer2012本地帮助文档安装失败问题
由于本人在前一段时间安装了SqlServer2012,安装后没有自带本地帮助文档,因为新的数据库版本微软捆绑了一个本地帮助文档查看器软件,所以在这个软件里面选择联机安装的时候,总是下载不成功,原因你们 ...
- 【Unity】13.3 Realtime GI示例
分类:Unity.C#.VS2015 创建日期:2016-04-19 一.简介 使用简单示例而不是使用实际示例的好处是能让你快速理解光照贴图和光影效果相关的概念和基本设置办法,这样可避免实际复杂场景中 ...
- 在MVC中应用百度富文本编辑器
1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...
- mysql select语句解析
select语句用于从一个或多个数据表选出特定行.特定列的交集 最简单的select语句的语法格式如下: select column1,column2 ........ (列) from 数 ...
- PHP生成图片验证码demo【OOP面向对象版本】
下面是我今天下午用PHP写的一个生成图片验证码demo,仅供参考. 这个demo总共分为4个文件,具体代码如下: 1.code.html中的代码: <!doctype html> < ...
- HttpClient总结一之基本使用
最近工作中是做了一个handoop的hdfs系统的文件浏览器的功能,是利用webhdfs提供的rest api来访问hdfs来与hdfs进行交互的,其中大量使用HttpClient,之前一直很忙,没什 ...