html5---文件

一、FileList对象鱼file对象

　　html4中，file控件只允许放置一个文件，html5中增加了multiple属性，允许file控件一次放置多个文件，这些file的列表就是FileList对象，有属性name表示文件名，有lastModifiedDate属性表示文件的最后修改日期

    <input type="file" id="f" multiple size="80"/><!--size属性是控制上传框的大小-->
    <input type="button" onClick="btn_click();" value="上传文件"/>

function btn_click(){
    var f=document.getElementById("f");
    for(var i=0;i<f.files.length;i++){
        alert(f.files[i].name);
    }
}

二、Blob对象

　　2.1 Blob对象的介绍：

　　　　Blob是一个可以存储二进制文件的容器，使用二进制保存数据，数据库常常使用Blob来保存数据，File接口继承了Blob对象。

　　2.2 Blob对象的属性和方法

　　　　2.2.1 创建Blob对象：使用BlobBuilder接口构建

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

var bb = new BlobBuilder(); 

　　　　2.2.2 向blob添加数据：使用append方法

bb.append('hello');

 

　　　　2.2.3 获取Blob对象：使用getBlob方法

bo = bb.getBlob('text/plain');

　　　　2.2.4 两个属性：size(返回字节大小)和type(返回数据类型)

bo.size; // 5
bo.type; // text/plain

 

三、FileReader接口

　　3.1 FileReader：HTML5中，引入了FileReader接口，来实现对本地文件的异步操作，使用该API可以在浏览器主线程中异步访问文件系统，将文件读入内存

　　3.2 检查浏览器是否支持FileReader接口

　　if(typeof FileReader=='undefined'){
        alert("您的浏览器不支持FileReader接口");
    }else{
        alert("您的浏览器支持FileReader接口");
    }

 

　　3.3 FileReader接口读取文件的方法：

　　readAsBinaryString(file):将文件读取为二进制码

　　readAsText(file,[encoding]):将文件读取为文本,第二个参数是文本编码方式，默认是UTF-8

　　readAsDataURL(file):将文件读取为Data URL字符串，将小文件以一种特殊格式的URL地址形式直接读入页面，这里的小文件是指图像和html格式的文件

    var f=document.getElementById("f");
    var r=document.getElementById("result");
    function readAsBinaryString(){
        var file=f.files[0];
        var read=new FileReader();
        read.readAsBinaryString(file);
        read.onload=function(f){
            r.innerHTML=this.result;
        }
    }
    function readAsDataURL(){
        var file=f.files[0];
        var read=new FileReader();
        read.readAsDataURL(file);
        read.onload=function(f){
            r.innerHTML='<img src="'+this.result+'"/>';
        }
    }

 　　3.4 FileReader接口的事件

　　onabort：数据读取中断时触发

　　onerror：数据读取出错时触发

　　onloadstart：数据开始读取时触发

　　onprogress：数据读取过程中触发

　　onload：数据读取成功完成时触发

　　onloadend：数据读取完成时触发，无论是否成功