HTML5 本地文件操作之FileSystemAPI实例(一)
文件操作实例整理一
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实例(四)
目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...
- HTML5 本地文件操作之FileSystemAPI实例(三)
文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...
- HTML5 本地文件操作之FileSystemAPI实例(二)
文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...
- HTML5 本地文件操作之FileSystemAPI整理(二)
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- HTML5 本地文件操作之FileSystemAPI整理(一)
一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type ...
- HTML5 本地文件操作之FileSystemAPI简介
一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...
- H5读取本地文件操作
H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...
- 【Egret】实现web页面操作PC端本地文件操作
Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...
- html5之文件操作
用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据.到目前文职,只有FF3.6+和Chrome6 ...
随机推荐
- 镜像文件挂载及本地yum搭建
环境:centos7.2 背景:企业内网不能上网,需安装软件以及软件之间的依赖问题 解决方案:下载和企业内网服务器相同版本的centos7.2镜像文件完整版(不是最小化的iso) 挂载镜像文件 1.上 ...
- 在Win10下搭建web服务器,使用本机IP不能访问,但是使用localhos或127.0.0.1可以正常访问的解决办法
最近在在Win10下搭建web服务器,发现通过windows自带的浏览器win10 edge浏览器使用本机IP不能放问,但是使用localhos或127.0.0.1可以正常访问, 后来无意发现,使用w ...
- Web开发模式演变(转)
add by zhj:目前用的最多应该是模式二,其次是三.四,而模式五比较新,我自己也不太懂. 模式二--前后台交互的方式为整个页面,即每次请求,服务器都将HTML模板渲染后发给客户端,每次请求都返回 ...
- JAVA 画图板实现(基本画图功能+界面UI)二、功能实现及重绘实现
上篇博客中介绍了界面的实现方法,在这篇博客中将对每个按钮的功能的实现进行讲解并介绍重绘 首先肯定要添加事件监听机制了,那么问题来了,事件源对象是谁?需要添加什么方法?事件接口是什么? 1.我们需要点击 ...
- Python基础笔记(一)
1. 输出 主要函数为print(),基础调用为: myName = "wayne" myAge = 18 print("My name is %s, I'm %d ye ...
- Cdq分治整体二分学习记录
这点东西前前后后拖了好几个星期才学会……还是自己太菜啊. Cdq分治的思想是:把问题序列分割成左右两个,先单独处理左边,再处理左边对右边的影响,再单独处理右边.这样可以消去数据结构上的一个log,降低 ...
- 【Tsinsen-A1486】树(王康宁) 点分治 + Trie
A1486. 树(王康宁) 时间限制:1.0s 内存限制:512.0MB 总提交次数:455 AC次数:97 平均分:52.62 查看未格式化的试题 提交 试题讨论 试题来源 ...
- CentOS下使用LVM进行分区(转)
说明:为什么抄,因为这篇文章图文并茂,所有测试都在CentOS 6和7测试过. 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统 ...
- spring集成kafka
一.添加依赖项 compile 'org.springframework.kafka:spring-kafka:1.2.2.RELEASE' 二.发消息(生产者) 2.1 xml配置 <?xml ...
- HTML5之Javascript多线程
Javascript执行机制 在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setint ...