文件操作实例整理一
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 + ' 文件内容:' + reader.result; //文件大小 txt1.innerHTML += ' 字节大小:' + 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 + ' 文件内容:' + reader.result; //文件大小 txt1.innerHTML += ' 字节大小:' + file.size; } reader.readAsText(file); }); }
更多:
HTML5 本地文件操作之FileSystemAPI整理(二)