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

时间:2021-07-27 02:21:22

文件操作实例整理二

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::57128/temporary/2017-02-23_182417.png console.info(entry.toURL()); var li = document.createElement(‘li‘); li.innerHTML = [‘是否是目录:‘, entry.isDirectory, ‘----文件名:‘, entry.name, ‘<img src="‘ + entry.toURL() + ‘" border=1 />‘].join(‘‘); fragment.appendChild(li); } }); document.querySelector(‘#img‘).appendChild(fragment); }

5.选择多个文件,并复制到沙盒文件系统中