HTML5 FileAPI读取实例---（一）

在HTML5中，提供了一个关于文件操作的API，通过这个API，对于从web页面上访问本地文件系统的相关处理变得十分简单。到目前为止只有部分浏览器对它提供支持。

1.FileList对象和File对象

　　FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset='UTF-8'/>
 5         <title>FileList and File </title>
 6         <script type="text/javascript" language="JavaScript">
 7 function showFiles(){
 8 var file,
 9                 len = document.getElementById('file').files.length;//返回FileList文件列表对象
10 for (var i=0; i < len; i++) {
11                   file = document.getElementById('file').files[i];
12                   alert(file.name);
13                 };
14                 
15             }            
16 </script>               
17     </head>
18     <body>
19         <input type="file" id='file' multiple="multiple" width="80px"/>
20         <input type="button" id="bt1" value="click" onclick="showFiles();"/>
21     </body>
22 </html>

View Code

2.Blob对象

　　提到Blob对象，估计有人会想起OracleDB中Blob字段，意义上有些类似。HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。

　　Blob对象的两个属性，size：表示一个对象的字节长度。type：表示一个对象的MIME类型，如若是未知类型返回空字符串。

    function showFileInfo(){
                 var file = document.getElementById('file').files[0];
                 var size = document.getElementById('fileType');
                 var type = document.getElementById('fileSize');
                 size.innerHTML = file.size;
                 type.innerHTML = file.type;
             }

　　对于图像类型的文件，Blob对象的type属性都是以image/开头，可以利用这个特性对用户选择的文件类型做判断。

　读取或预览图片

function showFileInfo() {
    var file = document.getElementById('file').files[0];
    if (checkImage(file)) {
        var size = document.getElementById('fileType');
        var type = document.getElementById('fileSize');
        size.innerHTML = file.size;
        type.innerHTML = file.type;
    }
    else {
        return;
    }
}
function checkImage(file) {
    if (!/img/w+/.test(file.type)) {
        alert(file.name + "不是图片");
        return false;
    }
    return true;
}

　　另外，file控件在HTML5标准中添加了accept属性，用来限制接受的文件类型，但目前各浏览器对齐支持都仅限于在打开文件选择窗口时默认的选择图像文件而已，如果选择其他类型，控件也能接受。

3.FileReader接口

关于FileReader API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>FileReader</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <script type="text/javascript" language="JavaScript">
        var file, result;
        function myLoad() {
            file = document.getElementById('file').files[0];
            result = document.getElementById('result');
        }
        //判断浏览器支付支持FileReader
        if (typeof FileReader == 'undefined') {
            result.innerHTML = "你的浏览器不支持 FileReader";
            file.setAttribute("disabled", "disabled");
        }
        function readAsDataURL() {
            if (!/image/w+/.test(file.type)) {
                alert(file.name + '不是一个图片类型的文件');
            } else {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    result.innerHTML = "<img src=" + reader.result + "/>";
                };
            }
        }
        function readAsBinaryString() {
            var reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = function (e) {
                result.innerHTML = reader.result;
            };
        }
        function readAsText() {
            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function (e) {
                result.innerHTML = reader.result;
            };
        }
    </script>
</head>
<body onload="myLoad();">
    <p>
        <input type="file" id='file' />
        <input type='button' id="bt_DataURL" value="读取图片" onclick="readAsDataURL();" />
        <input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();" />
        <input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();" />
    </p>
    <div id="result"></div>
</body>
</html>

View Code