文件操作实例整理一

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. 镜像文件挂载及本地yum搭建

    环境:centos7.2 背景:企业内网不能上网,需安装软件以及软件之间的依赖问题 解决方案:下载和企业内网服务器相同版本的centos7.2镜像文件完整版(不是最小化的iso) 挂载镜像文件 1.上 ...

  2. 在Win10下搭建web服务器,使用本机IP不能访问,但是使用localhos或127.0.0.1可以正常访问的解决办法

    最近在在Win10下搭建web服务器,发现通过windows自带的浏览器win10 edge浏览器使用本机IP不能放问,但是使用localhos或127.0.0.1可以正常访问, 后来无意发现,使用w ...

  3. Web开发模式演变(转)

    add by zhj:目前用的最多应该是模式二,其次是三.四,而模式五比较新,我自己也不太懂. 模式二--前后台交互的方式为整个页面,即每次请求,服务器都将HTML模板渲染后发给客户端,每次请求都返回 ...

  4. JAVA 画图板实现(基本画图功能+界面UI)二、功能实现及重绘实现

    上篇博客中介绍了界面的实现方法,在这篇博客中将对每个按钮的功能的实现进行讲解并介绍重绘 首先肯定要添加事件监听机制了,那么问题来了,事件源对象是谁?需要添加什么方法?事件接口是什么? 1.我们需要点击 ...

  5. Python基础笔记(一)

    1. 输出 主要函数为print(),基础调用为: myName = "wayne" myAge = 18 print("My name is %s, I'm %d ye ...

  6. Cdq分治整体二分学习记录

    这点东西前前后后拖了好几个星期才学会……还是自己太菜啊. Cdq分治的思想是:把问题序列分割成左右两个,先单独处理左边,再处理左边对右边的影响,再单独处理右边.这样可以消去数据结构上的一个log,降低 ...

  7. 【Tsinsen-A1486】树(王康宁) 点分治 + Trie

    A1486. 树(王康宁) 时间限制:1.0s   内存限制:512.0MB   总提交次数:455   AC次数:97   平均分:52.62 查看未格式化的试题   提交   试题讨论 试题来源 ...

  8. CentOS下使用LVM进行分区(转)

    说明:为什么抄,因为这篇文章图文并茂,所有测试都在CentOS 6和7测试过. 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统 ...

  9. spring集成kafka

    一.添加依赖项 compile 'org.springframework.kafka:spring-kafka:1.2.2.RELEASE' 二.发消息(生产者) 2.1 xml配置 <?xml ...

  10. HTML5之Javascript多线程

    Javascript执行机制      在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setint ...