File API简介

File API让我们可以创建文件,存储在本地文件系统的一个安全沙箱里,亦可以从其他来源读取文件,并对其进行操作

Web应用通过requestFileSystem方法来访问本地文件系统,该方法是全局的:

requestFileSystem(type, size, successCallback, opt_errorCallback);

第一个参数表示存储的类型,有两个值可以选择,TEMPORARY或 PERSISTENT。使用TEMPORARY的话,存储的数据会由浏览器自行决定何时清除。PERSISTENT则表示只能由你的程序来决定何时清除数据。

第二个参数是数字,表示你希望使用多大的空间,单位是MB,后两个参数分别是请求成功和失败(可选)的回调方法。

如果一切顺利的话,系统会调用成功的回调函数,并传入一个FileSystem对象,所有File API或多或少都需要基于此对象来使用。

创建文件:

window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {

fs.root.getFile(‘myfile.txt‘, {create: true}, function(fileEntry) {

// do something with the fileEntry

});

});

getFile方法可以用来创建或者获取文件,第一个参数是文件名,可以包含绝对或相对的路径,第二个参数是一个JS对象,用来决定当文件不存在时函数的行为,在本例中create:true表示,当文件不存在时,函数会创建此文件,反之会抛异常,你可以使用fileEntry的getMetaData方法获取文件的元数据

fileEntry.getMetaData(function(md) {

alert(md.modificationTime.toDateString());

}, onError);

读取文件:得到了fileEntry对象后,你可以调用它的file方法配合FileReader API来获取文件内容了

requestFileSystem(TEMPORARY, 1024*1024, function(fs) {

fs.root.getFile(‘myfile.txt‘, {}, function(fileEntry) {

fileEntry.file(function(file) {

var reader = new FileReader();

reader.onload = function(e) {

alert(reader.result);

};

reader.readAsText(file); // 把文件作为纯文本读取(其他格式亦可)

});

});

});

写文件:

var BlobBuilder = WebKitBlobBuilder;

requestFileSystem(TEMPORARY, 1024*1024, function(fs) {

fs.root.getFile(‘temp.txt‘, {create: true}, function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

fileWriter.onwrite = function(e) {

console.log(‘写入完毕‘);

};

fileWriter.onerror = function(e) {

console.log(‘写入失败‘)

};

var bb = new BlobBuilder();

bb.append(‘my file contents‘);

fileWriter.write(bb.getBlob(‘text/plain‘));

});

});

});

写文件的步骤大致如下,先使用BlobBuilder API创建一个二进制对象,传给fileWriter对象的write方法,然后在fileWriter对象的onwrite/onerror事件里面响应写入的成功或失败。

对现有文件追加内容:

BlobBuilder = BlobBuilder || WebkitBlobBuilder || MozBlobBuilder;

requestFileSystem(TEMPORARY, 1024*1024, function(fs) {

var bb = new BlobBuilder;

fs.root.getFile(‘myfile.txt‘, {create: false}, function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

fileWriter.seek(fileWriter.length);

fileWriter.write(bb.getBlob(‘text/plain‘));

});

});

});

上面的代码调用了fileWriter对象的seek方法,把文件指针移动到指定的位置,新位置从文件头开始以字节数度量,本例中使用fileWrtier.length作为参数,即将文件指针移动到文件末尾,然后进行写入

如何导入文件到filesystem:

1 使用<input type="file" />标签

2 使用HTML5的拖拽API

3 使用XMLHttpRequest

4 使用copy & paste

input:

document.getElementById(‘myfile‘).onchange = function(e) {

var f = this.files[0];

requestFileSystem(TEMPORARY, 1024*1024, function(fs) {

fs.root.getFile(f.name, {create:true}, function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {

fileWriter.write(f);

});

});

});

};

fileWriter的write方法可以接受二进制对象或者File(实际上所有File都是blob)。

使用XMLHttpRequest下载远程文件:

var writeBlob = function(dir, blob, fileName, callback) {

dir.getFile(fileName, {create: true}, function(fileEntry) {

fileEntry.createWriter(function(writer) {

if (callback) {

writer.onwrite = callback;

}

writer.write(blob);

});

});

};

var downloadImage = function(url, mimeType) {

var xhr = new XMLHttpRequest();

xhr.open(‘GET‘, url, true);

xhr.responseType = ‘blob‘;

xhr.onload = function(e) {

if (this.status == 200) {

var parts = url.split(‘/‘);

var fileName = parts[parts.length - 1];

window.requestFileSystem(TEMPORARY, 1024*1024*5 /*5MB*/, function(fs) {

var onWrite = function(evt) {

console.log(‘写入成功.‘);

};

// 注意:这里不是xhr.responseText

writeBlob(fs.root, xhr.response, fileName, onWrite);

});

}

};

xhr.send(null);

};

downloadImage(‘your/img.jpg‘, ‘image/jpeg‘);

上面的代码从远程加载一个文件并存入本地Filesystem,需要注意的是,在发出请求前,需要先设置xhr.responseType,可以根据你需要返回的数据类型从text, arraybuffer, blob或document中任选一种,省略的话则默认为text类型。

http://cube.qq.com/?p=199

时间: 2024-10-15 04:40:11

File API简介的相关文章

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访

gulp API 简介

一.gulp API 简介 gulp 本身能做的事情非常少,主要是通过插件来提供各种功能,gulp 本身只提供了4个非常简洁的 API, 掌握这4个 API 你就基本掌握了 gulp 的全部. 1.gulp.src(globs[, options]) 2.gulp.dest(path[, options]) 3.gulp.task(name[, deps], fn) 4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu

Web Api 简介

ASP.NET Web API 简介 ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP.NET Web API 也是构建 RESTful 服务的理想平台. ASP.NET Web API 特性 ASP.NET Web API 包含下列特性: 先进的 HTTP 编程模型: 使用新的强类型的 HTTP 对象模型直接操作 HTTP 请求和响应, 在 HTTP客户端使用相同的编程模型和 HTTP

Pomelo开发中Web客户端开发API简介

使用pomelo做服务端开发时,无论什么客户端,只要能遵循与服务端的线上协议,就能够与服务端建立通信.pomelo内建提供的sioconnector和hybridconnector都定义了自己的协议格式,其中sioconnector用于socket.io的通信,hybridconnector则用来处理websocket和tcp的连接通信.为了方便客户端的开发,pomelo提供了部分平台的客户端SDK,主要包括用于Web端的JavaScript的SDK以及基于C/C++语言开发的libpomelo

ZABBIX API简介及使用

API简介 Zabbix API开始扮演着越来越重要的角色,尤其是在集成第三方软件和自动化日常任务时.很难想象管理数千台服务器而没有自动化是多么的困难.Zabbix API为批量操作.第三方软件集成以及其他作用提供可编程接口. Zabbix API是在1.8版本中开始引进并且已经被广泛应用.所有的Zabbix移动客户端都是基于API,甚至原生的WEB前端部分也是建立在它之上.Zabbix API 中间件使得架构更加模块化也避免直接对数据库进行操作.它允许你通过JSON RPC协议来创建.更新和获

ASP.NET Web API 简介

ASP.NET Web API 简介 ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP.NET Web API 也是构建 RESTful 服务的理想平台. ASP.NET Web API 特性 ASP.NET Web API 包含下列特性: 先进的 HTTP 编程模型: 使用新的强类型的 HTTP 对象模型直接操作 HTTP 请求和响应, 在 HTTP客户端使用相同的编程模型和 HTTP

HTML 5 File API:文件拖放上传功能

即将到来的 html5 规范有几个特性,以致使 HTML 远远超出其本身作为一种标记语言的能力,并为 Web 开发者提供了一些强大的脚本工具.负责监督 HTML5 发展进程的 W3C 组织,刚刚出版了一份强有力的规格草案 – HTML5 File API 接口功能. 该 API 的设计初衷,是改善基于浏览器的 Web 应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 <input type=”file”> 来处理文件上传. 更为惊喜的是,该 API 为开发者提供了