文件操作实例整理一

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整理(二)

HTML5 本地文件操作之FileSystemAPI整理(一)

HTML5 本地文件操作之FileSystemAPI简介

HTML5 本地文件操作之FileSystemAPI实例(一)的更多相关文章

  1. HTML5 本地文件操作之FileSystemAPI实例(四)

    目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...

  2. HTML5 本地文件操作之FileSystemAPI实例(三)

    文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...

  3. HTML5 本地文件操作之FileSystemAPI实例(二)

    文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...

  4. HTML5 本地文件操作之FileSystemAPI整理(二)

    一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...

  5. HTML5 本地文件操作之FileSystemAPI整理(一)

    一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type ...

  6. HTML5 本地文件操作之FileSystemAPI简介

    一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...

  7. H5读取本地文件操作

    H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...

  8. 【Egret】实现web页面操作PC端本地文件操作

    Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...

  9. html5之文件操作

    用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据.到目前文职,只有FF3.6+和Chrome6 ...

随机推荐

  1. TypeScript的HTML5游戏

    wildfirecode 自动化的基于TypeScript的HTML5游戏开发 自动化的开发流程 在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来 ...

  2. 【LOJ】#2526. 「HAOI2018」苹果树

    题解 这计数题多水啊我怎么调了那么久啊 我不想老年化啊QAQ (注意这里的二叉树带标号) 考虑\(g[i]\)表示\(i\)个点二叉树所有节点的深度和,\(f[i]\)表示\(i\)个点的二叉树两两节 ...

  3. 000 SpringMVC介绍

    1.介绍 2.MVC 模型(Model)封装了应用程序数据,通常它们将由POJO类组成. 视图(View)负责渲染模型数据,一般来说它生成客户端浏览器可以解释HTML输出. 控制器(Controlle ...

  4. PHP函数之trigger_error

    在程序开发中,如果我们编码不规范,比如调用不存在的变量.语法错误.少了个逗号,这些都会引起系统报错并进行提示,但是今天,突然发现PHP还有这样一个函数,用于自动触发一个报错提示,并且会将报错信息写入p ...

  5. python、Java、大数据和Android的薪资如何?

    莫名其妙,从去年年底开始,Python这个东西在中国,突然一下子就火起来了,直至现在,他的热度更是超越了java,成为软件工程师最为关注的话题.Python之所以能火起来,很大一方面是因为大数据.人工 ...

  6. U盘制作Win7安装盘的方法

    Windows 7 USB/DVD download tool 微软官方说明:http://www.microsoftstore.com/st ... Win7_usbdvd_dwnTool 下载地址 ...

  7. Django的URL别名

      项目的urls.py配置文件   from message.views import getform       urlpatterns = [   url(r'^admin/', admin.s ...

  8. P1828 香甜的黄油 Sweet Butter

    对于这道洛谷ac而我整了一下午的codevs的题,我也是很绝望啊. 原因是队列数组开小了我勒个去???我说STL怎么能过 题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧 ...

  9. HTML5 的新特性以及新标签的浏览器兼容问题

    新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1)  拖拽释放(Drag and drop) API 2)  语义化更好的内容标签(heade ...

  10. (69)Wangdao.com第十一天_JavaScript 指定函数对象的 this 上下文对象

    指定函数对象的 this 上下文对象 即调用函数对象的 .call() 或者 .apply() 方法 指定 this 指向指定的对象. function myFun(){ document.write ...