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简介