在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>

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>

HTML5 FileAPI读取实例---（一）的更多相关文章

  1. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  2. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  3. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  4. Java学习-019-Properties 文件读取实例源代码

    在这几天的学习过程中,有开发的朋友告知我,每个编程语言基本都有相应的配置文件支持类,像 Python 编程语言中支持的 ini 文件及其对应的配置文件读取类 ConfigParse,通过这个类,用户可 ...

  5. Java学习-017-EXCEL 文件读取实例源代码

    众所周知,EXCEL 也是软件测试开发过程中,常用的数据文件导入导出时的类型文件之一,此文主要讲述如何通过 EXCEL 文件中 Sheet 的索引(index)或者 Sheet 名称获取文件中对应 S ...

  6. Java学习-016-CSV 文件读取实例源代码

    上文(CSV文件写入)讲述了日常自动化测试过程中将测试数据写入 CSV 文件的源码,此文主要讲述如何从 CSV 文件获取测试过程中所需的参数化数据.敬请各位小主参阅,若有不足之处,敬请大神指正,不胜感 ...

  7. Java学习-013-文本文件读取实例源代码（两种数据返回格式）

    此文源码主要为应用 Java 读取文本文件内容实例的源代码.若有不足之处,敬请大神指正,不胜感激! 1.读取的文本文件内容以一维数组[LinkedList<String>]的形式返回,源代 ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

随机推荐

  1. Unity3d 读取网络xml

    Unity3d 读取网络xml Unity3d 读取网络xml,这个xml文件需要不包含BOM信息,可以用UltraEdit打开xml文件,并且另存为的时候,选择不包含BOM的utf-8格式存储!

  2. Instagram的技术架构

    http://blogread.cn/it/article/5497 Instagram 被 Facebook 以10亿美金收购.团队规模:13 人.而在被Facebook收购前的一个月,整个团队才7 ...

  3. 使用spring-amqp结合使用rabbitmq

    maven 依赖包配置如下: <dependencies> <dependency> <groupId>org.springframework.amqp</g ...

  4. Redis Sentinel实现Failover

    redis版本:2.8.17   服务器规划: 10.50.13.34(6379 master) 10.50.13.35(6379 slave) 10.50.13.36(6379 slave) 10. ...

  5. （转载）教你在PHP中使用全局变量

    (转载)http://www.chinaz.com/program/2009/0123/64261.shtml 即使开发一个新的大型PHP程序,你也不可避免的要使用到全局数据,因为有些数据是需要用到你 ...

  6. 字符串(后缀数组)：POJ 3294 Life Forms

    Life Forms Description You may have wondered why most extraterrestrial life forms resemble humans, d ...

  7. Android *.db-journal

    config.xml <!-- The default journal mode to use use when Write-Ahead Logging is not active. Choic ...

  8. VLC打开.264文件

    昨天收到几个文件名是:xxx.264的文件,这种文件属于视频图像的raw files,即只包含视频数据.由于缺少视频头文件,所以一般播放器难以播放出来.网上很多介绍的是.H264文件如何打开,以及用一 ...

  9. Oracle Locks之DML锁

    Oracle通过锁来实现数据库的并发控制 Oracle Database automatically locks a resource on behalf of a transaction to pr ...

  10. oracle 零散知识汇集

    1. Select '登陆' + 2 From dual会报错: ora- 01722 无效数字,原理是oracle把'登陆'当成数字来和2进行加法运算. Select '登陆'|| 2 From d ...