HTML5のFile&FileSystem

最新推荐文章于 2021-07-04 07:15:24 发布

DY2019

最新推荐文章于 2021-07-04 07:15:24 发布

阅读量592

点赞数

分类专栏：玩转HTML5 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/DY2019/article/details/50662367

版权

玩转HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5のFile

File简介

HTML5对文件进行操作，使用File API

API介绍

File：文件对象
[属性]
name：文件名称
type：文件类型
lastModifiedDate：最后修改时间
size：文件大小
Blob：二进制文件对象
是File对象的基类，包括size和type属性
FileReader：读取文件对象
[方法]
readAsBinaryString，readAsText，readAsDataURL，readArrayBuffer，abort
[事件]
onabort，onerror，onloadstart，onprogress，onload，onloadend

实例展示

根据上传文件获取文件信息，JS代码如下：

function upload() {
    var files = document.querySelector("#file").files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        var info = file.name + ", " + file.size + ", " + file.type + ", " + file.lastModifiedDate;
        console.log(info);

        // method: readAsBinaryString, readAsText, readAsDataURL, readArrayBuffer, abort
        // event: onabort, onerror, onloadstart, onprogress, onload, onloadend
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(event) {
            detail.innerHTML = '<img src="' + this.result + '">';
        }
    }
}

文件上传界面html代码如下：

<body>
    <div id="status">
        <span id="detail"></span>
    </div>
    <div id="operate">
        <input type="file" id="file" multiple>
        <button type="button" id="upload" onclick="upload()">upload files</button>
    </div>
</body>

HTML5のFileSystem

FileSystem简介

FileSystem可以申请临时空间或永久配额，对文件进行离线操作

操作步骤

检查浏览器是否支持FileSystem
申请配额
成功与否Handler处理
得到FileSystem对象fs

<script type="text/javascript">
    window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
    var fs = null;
    var detail = document.querySelector("#detail");

    window.onload = function() {

        if (typeof window.requestFileSystem != "undefined") {
            apply(1024);
        } else {
            console.log("Sorry, your browser does not support FileSystem.");
        }
    }

    function apply(requestedBytes) {

        // request quota
        navigator.webkitPersistentStorage.requestQuota(requestedBytes, function (grantedBytes) {
            console.log('we were granted ', grantedBytes, 'bytes');
            window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, onInitFs, errorHandler);
        }, function(e) {
            console.log('Error', e);
        });

        // query temporary
        navigator.webkitTemporaryStorage.queryUsageAndQuota (function(usedBytes, grantedBytes) {
            console.log('Temporary: we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
        }, function(e) {
            console.log('Error', e);
        });

        // query quota
        navigator.webkitPersistentStorage.queryUsageAndQuota (function(usedBytes, grantedBytes) {
            console.log('Persistent: we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
        }, function(e) {
            console.log('Error', e);
        });
    }

    function onInitFs(filesystem) {
        fs = filesystem;
        console.log("Start use FileSystem.");
    }

    function errorHandler(error) {
        var msg = '';
        switch (error.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
        };
        console.log('Sorry, operate file system error, detail information: ' + msg);
    }
</script>

实例展示

创建文件，JS实例代码如下：

<script type="text/javascript">
    function createFile() {
        var fileName = "2016_2_14.log";
        fs.root.getFile(fileName, {
            create: true
        }, function(fileEntry) {
            console.log(fileEntry.fullPath + ", " + fileEntry.name);
        });
    }
</script>

页面展示html代码：

<body>
    <div id="status">
        <span id="detail"></span>
    </div>
    <div id="operate">
        <button type="button" id="create" onclick="createFile()">create file</button>
    </div>
</body>