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="' + 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整理（一）