• 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 + '
    文件内容:' + reader.result;
                //文件大小
                txt1.innerHTML += '
    字节大小:' + 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 + '
    文件内容:' + reader.result;
                //文件大小
                txt1.innerHTML += '
    字节大小:' + file.size;
            }
            reader.readAsText(file);
        });
    }

    更多:

    HTML5 本地文件操作之FileSystemAPI整理(二)

    HTML5 本地文件操作之FileSystemAPI整理(一)

    HTML5 本地文件操作之FileSystemAPI简介

  • 相关阅读:
    linux修改hostname
    ssh免密登录
    Linux添加用户到sudoers组
    nginx.conf
    linux ( CentOS 7)下Tengine(nginx)的安装与配置
    jacoco + ant远程统计(tomcat/spring boot)服务的代码覆盖率
    我只为一瓶啤酒
    iptables学习笔记
    离开了南京,从此没有人说话
    AutoConf自动生成Makefile(基于helloworld简单例子)
  • 原文地址:https://www.cnblogs.com/tianma3798/p/6441021.html
Copyright © 2020-2023  润新知