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