首页 > 代码库 > HTML5 本地文件操作之FileSystemAPI实例(二)
HTML5 本地文件操作之FileSystemAPI实例(二)
文件操作实例整理二
1.删除文件、复制文件、移动文件
//获取请求权限 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { //删除文件 fileEntry.remove() fs.root.getFile(‘test2.txt‘, { create: false }, function (fileEntry) { fileEntry.remove(function () { console.log(‘删除文件成功‘); }, errorHandler); }, errorHandler); //复制文件,如果文件存在则覆盖 fs.root.getFile(‘test4.txt‘, { create: false }, function (fileEntry) { fileEntry.copyTo(fs.root, ‘text4_copy.txt‘, function (fileEntry) { console.info(fileEntry); console.log(‘复制文件成功:‘ + fileEntry.fullPath); }, errorHandler); }, errorHandler) //移动文件,如果文件不存在移动失败 fs.root.getFile(‘test3.txt‘, { create: false }, function (fileEntry) { //获取移动目录 fs.root.getDirectory(‘mymove‘, { create: true }, function (dirEntry) { //移动文件如果 fileEntry.moveTo(dirEntry, ‘test4_move.txt‘, function (fileEntry) { console.log(‘移动文件成功:‘ + fileEntry.fullPath); }, errorHandler); }, errorHandler); }, errorHandler); } function errorHandler(err) { console.info(‘创建文件失败‘); console.info(err); }
2.写入追加文件
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { //指定位置,追加内容 fs.root.getFile(‘test3.txt‘, { create: true }, function (fileEntity) { //向文件中写入内容 if (fileEntity.isFile) { fileEntity.createWriter(function (fileWriter) { //将写入指针移动到文件结尾 fileWriter.seek(fileWriter.length); var blob = new Blob([‘hello 中国 \r\n‘], { 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); }); }
3.截断文件可以使用fileWriter.trancute()
4.读取根目录中的图片,显示到网页
//获取请求权限 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { //读取根目录的图片,并显示 var dirReader = fs.root.createReader(); var entries = []; var readEntries = function () { dirReader.readEntries(function (results) { if (results.length == 0) { showEntries(entries.sort()); } else { entries = entries.concat(toArray(results)); readEntries(); } }, errorHandler); } readEntries(); } function errorHandler(err) { console.info(‘创建文件失败‘); console.info(err); } function toArray(list) { return Array.prototype.slice.call(list || [], 0); } //显示图片 function showEntries(entries) { var fragment = document.createDocumentFragment(); entries.forEach(function (entry, i) { if (entry.isFile && entry.name.indexOf(‘.png‘) != -1) { //将entry.toURL()结果:filesystem:http://localhost:57128/temporary/2017-02-23_182417.png console.info(entry.toURL()); var li = document.createElement(‘li‘); li.innerHTML = [‘是否是目录:‘, entry.isDirectory, ‘----文件名:‘, entry.name, ‘<img src="http://www.mamicode.com/‘ + entry.toURL() + ‘" width="100" border=1 />‘].join(‘‘); fragment.appendChild(li); } }); document.querySelector(‘#img‘).appendChild(fragment); }
5.选择多个文件,并复制到沙盒文件系统中
document.querySelector(‘#myFile‘).onchange = function (e) { var files = this.files; //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { for (var i = 0; i < files.length; i++) { var file = files[i]; (function (f) { //复制文件,如果存在抛出异常 fs.root.getFile(file.name, { create: true, exclusive: true }, function (fileEntry) { fileEntry.createWriter(function (fileWriter) { fileWriter.write(f); //write() 参数可以使File或Blob对象 }); //显示文件 showFile(fileEntry); }, errorHandler) })(file); } } }; 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 += ‘\r\n文件名:‘ + fileEntry.name + ‘\r\n文件内容:‘ + reader.result; //文件大小 txt1.innerHTML += ‘\r\n字节大小:‘ + file.size; } reader.readAsText(file); }); }
更多:
HTML5 本地文件操作之FileSystemAPI实例(一)
HTML5 本地文件操作之FileSystemAPI整理(二)
HTML5 本地文件操作之FileSystemAPI整理(一)
HTML5 本地文件操作之FileSystemAPI实例(二)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。