文件操作实例整理一
1.请求系统配额类型
console.info(window.TEMPORARY); //0 临时
console.info(window.PERSISTENT); //1 持久
2.持久存储下，创建文件、创建子目录下的文件
//如果使用持久存储，需要使用requestQuota
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//当前请求存储空间，如果不修改大小的话，只需要请求一次就可以了
console.info(window.webkitStorageInfo);
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024 * 1024 * 5, function (gratedBytes) {
console.log('请求成功的空间：' + gratedBytes);
window.requestFileSystem(window.PERSISTENT, gratedBytes, initFs, errorHandler);
}, errorHandler);
function initFs(fs) {
//创建文件，只能创建当前目录下的文件
//如果不指定create=true，文件不存在抛出异常，‘DOMException: A requested file or directory could not be found at the time an operation was processed.’
//如果不指定exclusive，create=true的话,不存在创建，存在重新覆盖
//在文件件目录操作中create=true如果文件目录存在的话不清空
fs.root.getFile('test1.txt', {
create: true, //true:创建新文件，如果文件存在抛出异常执行errorHandle，不影响程序执行
exclusive: true //是否高级文件验证
}, function (fileEntry) {
console.info(fileEntry);
console.log('文件创建成功，' + fileEntry.name);
}, errorHandler); //创建目录下的文件(不能直接指定路径创建文件)
fs.root.getDirectory('MyPictures', { create: true }, function (dirEntry) {
dirEntry.getFile('log3.txt', { create: true }, function (fileEntry) {
console.log('目录下文件创建成功：' + fileEntry.fullPath);
}, errorHandler);
dirEntry.getFile('test1.txt', { create: true }, function (fileEntry) {
console.log('目录下文件创建成功：' + fileEntry.fullPath);
}, errorHandler);
}, errorHandler)
}
function errorHandler(err) {
console.error(err);
//console.info(typeof FileError);//FileError 目前不可用或已经放弃
console.info('创建文件是失败');
}
3.写入文件、读取文件
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
//创建文件，如果不指定exclusive，create=true的话不再创建，存在重新覆盖
fs.root.getFile('test3.txt', { create: true }, function (fileEntity) {
//向文件中写入内容
if (fileEntity.isFile) {
fileEntity.createWriter(function (fileWriter) {
//写入的内容可以可是File 或者Blob
var blob = new Blob(['hello 中国'], {
type: 'text/plain'
});
fileWriter.write(blob);
//显示文件内容
showFile(fileEntity);
}, errorHandler);
}
console.info('当前文件名，' + fileEntity.name);
}, errorHandler);
}
function errorHandler(err) {
console.info('创建文件失败');
console.info(err);
}
//显示指定fileEntity中的内容
function showFile(fileEntity) {
fileEntity.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
var txt1 = document.getElementById('txt1');
txt1.innerHTML = '写入文件成功：' + reader.result;
}
reader.readAsText(file);
});
}
4.判断文件是否存在
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
//判断文件是否存在
fs.root.getFile('test3.txt', {}, function (fileEntry) {
if (fileEntry.isFile) {
//显示文件内容
showFile(fileEntry);
}
}, errorHandler);
}
function errorHandler(err) {
console.info('创建文件失败');
console.info(err);
}
//显示指定fileEntity中的文件内容、文件信息
function showFile(fileEntry) {
fileEntry.file(function (file) {
console.info(file);
var reader = new FileReader();
reader.onloadend = function (e) {
var txt1 = document.getElementById('txt1');
txt1.innerHTML = '文件名：' + fileEntry.name + '\r\n文件内容：' + reader.result;
//文件大小
txt1.innerHTML += '\r\n字节大小：' + file.size;
}
reader.readAsText(file);
});
}
5.写入文件，并监听事件
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler);
function initFs(fs) {
//特别说明：BlobBuilder 以被抛弃，不建议使用
//写入文件
fs.root.getFile('test4.txt', { create: true }, function (fileEntry) {
if (fileEntry.isFile) {
//使用fileWriter写入内容，并监听事件
fileEntry.createWriter(function (fileWriter) {
console.info(fileWriter);
fileWriter.onwriteend = function (e) {
console.log('读取写入文件结束');
}
fileWriter.onerror = function (e) {
console.log('写入异常：' + e.toString());
}
var blob = new Blob(['<h1>测试内容</h1>'], {
type: 'text/plain'
});
fileWriter.write(blob);
//显示文件
showFile(fileEntry);
}, errorHandler);
}
}, errorHandler);
}
function errorHandler(err) {
console.info('创建文件失败');
console.info(err);
}
//显示指定fileEntity中的文件内容、文件信息
function showFile(fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
var txt1 = document.getElementById('txt1');
txt1.innerHTML = '文件名：' + fileEntry.name + '\r\n文件内容：' + reader.result;
//文件大小
txt1.innerHTML += '\r\n字节大小：' + file.size;
}
reader.readAsText(file);
});
}
更多：
HTML5 本地文件操作之FileSystemAPI整理（二）