HTML5文件操作API
HTML5文件操作API
一、文件操作API
在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立。 在HTML5标准中,默认提供了操作文件的API让这一切直接标准化。有了操作文件的API,让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作。接下来主要给大家介绍文件读取的几个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
就是停止读取的方法。
FileReader对象的三个读取文件数据方法
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的操作。
实例一:获取上传文件的文件名(注:需要引入jQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
实例二:读取上传文件内容,然后将文件内容直接读取到浏览器上(注:需要引入jQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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。
HTML5文件操作API的更多相关文章
- HTML5 文件操作API
简介 我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便.从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进.存储二进制数据或与其进行交互不应局限于桌面. ...
- Html5 学习系列(四)文件操作API
原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...
- paip.复制文件 文件操作 api的设计uapi java python php 最佳实践
paip.复制文件 文件操作 api的设计uapi java python php 最佳实践 =====uapi copy() =====java的无,要自己写... ====php copy ...
- 文件的概念以及VC里的一些文件操作API简介
文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文 ...
- Java文件操作API功能与Windows DOS命令和Linux Shell 命令类比
Java文件操作API功能与Windows DOS命令和Linux Shell 命令类比: Unix/Linux (Bash) Windows(MS-DOS) Java 进入目录 cd cd - 创建 ...
- H5文件操作API
引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨浏览器.跨设备等情况下实现统一的表现,从另外一个 ...
- nodejs模块fs——文件操作api
// fs模块常用api // 读取文件 .写入文件 .追加文件. 拷贝文件 .删除文件 // 读取文件 // fs.readFile(path[, options], callback) // fs ...
- HTML5学习之文件操作(九)
之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很进行跨平台的处理,另外就是让我们的web应用依赖了第三方的插件,而不是很独立 ...
- HTML5 本地文件操作之FileSystemAPI简介
一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...
随机推荐
- 用Java实现栈结构
栈是一种先进后出的数据结构,出栈入栈都是操作的栈顶元素,下面是利用Java语言实现的一个简单的栈结构 class MyStack{ private int size;//栈大小 private Obj ...
- 【BZOJ1412】狼和羊的故事(网络流)
[BZOJ1412]狼和羊的故事(网络流) 题面 Description "狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向......" Orez听 ...
- datatable 分页实例
1.使用datatable前台分页,需要后台返回全部数据,返回lisit 2.如果是后台分页 则后台需要获取分页参数,页面中要加 "searchable":true, " ...
- VM快照-克隆重要应用讲解及克隆后网卡问题解决
快照:snapshot 1---2---3---5 用于以后 rollback 1 2 3 5 克隆前关机:halt 克隆之后连不上网 解决办法: 1.编辑eth0的配置文 vi/etc/syscon ...
- Java 容器之Hashset 详解
Java 容器之Hashset 详解.http://blog.csdn.net/nvd11/article/details/27716511
- Dapper一个和petapoco差不多的轻量级ORM框架
我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db,而且市面上的orm框架有很多,其中有一个框架 叫做dapper,而且被称为th ...
- 手摸手教你微信小程序开发之自定义组件
前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...
- Node与apidoc的邂逅——NodeJS Restful 的API文档生成
作为后台根据需求文档开发完成接口后,交付给前台(angular vue等)做开发,不可能让前台每个接口调用都去查看你的后台代码一点点查找.前台开发若不懂你的代码呢?让他一个接口一个接口去问你怎么调用, ...
- cookie 使用方法
//写cookies setCookie: function(name, value) { let days = 1 let exp = new Date() exp.setTime(exp.getT ...
- es6学习笔记--新数据类型Symbol
学习了es6语法的symbol类型,整理笔记,闲时复习. Symbol 是es6新增的第七种原始数据类型(null,string,number,undefined,boolean,object),是为 ...