HTML5—FileApi

multiple属性和file对象

<input type="file"/>添加了multiple属性，允许一次放置多个文件，使用files属性得到放置的文件列表，列表内的每一个都是file对象，该对象提供了只读属性

名称	描述
name	本地文件系统中的名字
size	文件的字节大小
type	文件的MIME类型
lastMOdifiedDate	文件上一次被修改的时间

<input type=file  id=file  multiple=multiple>
<script type=text/javascript>
document.getElementById('file').onchange=function(event){
    var files=event.target.files;
    for(var i=0,len=files.length;i<len;i++){
    var f=files[i];
    console.log('name='+f.name+', size='+f.size+' ,    type='+f.type+' , date='+f.lastModifiedDate);
    }
}
</script>

accept属性

通过给file类型的<input>元素设置accept属性，可以过滤所选文件的类型。

<input type=”file”accept=”image/gif ,image/png,image/jpg”/>

FileReader

• FileReader提供了异步读取文件的方法

名称	描述
readAsText(file,encoding)	以纯文本形式读取文件
readAsDataURL(file)	读取文件并将文件以数据URI的形式保存在result属性中
readAsBinaryString(file)	读取文件将一个字符串保存在result中，字符串中的每个字符表示一字节
readAsArrayBuffer(file)	读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中
abort()	终止读取

• FileReader提供了读取文件的事件

名称	描述
progress	50ms触发一次，提供lengthComputable、loaded、total属性
error	发生错误时触发，FileReader对象的error.code属性值，即错误码
load	读取完成触发
loadend	读取完成、发生错误、中断

<p>  
    <label>选择一个文件</label>
    <input type=file id=file>
    <input type=button value=readAsDataURL onclick=readAsDataURL()>
    <input type=button value=readAsBinary onclick=readAsBinaryString()>
    <input type=button value=readAsText onclick=readAsText()>
</p>  
<div name=result id=result></div>

<script>  
    var result=document.getElementById('result');
    var fileinput=document.getElementById('file');
    var result=document.getElementById('result');
    if(typeof    FileReader =='undefined'){
        result.innerHTML=<p>抱歉，你的浏览器不支持</p>;
        fileinput.setAttribute('disabled','disabled');
    }
    function readAsDataURL(){
        var file=document.getElementById('file').files[0];
        if(!/image\/\w+/.test(file.type)){
            alert('请确保文件类型');
            return false;
        }
        var reader=new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function(e){
            result.innerHTML='<img src='+this.result+' alt=/>';
        }
    }
    function readAsBinaryString(){
        var file=document.getElementById('file').files[0];
        var reader=new FileReader();
        reader.readAsBinaryString(file);
        reader.onload=function(f){
            result.innerHTML=this.result;
        }
      }
    function readAsText(){
        var file=document.getElementById('file').files[0];
        var reader=new FileReader();
        reader.readAsText(file);
        reader.onload=function(f){
            result.innerHTML=this.result;
        }
    }

</script>

Blob

<input type="file"/>控件的file对象继承自Blob对象，该对象有两个属性：size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型。该对象还有一个slice方法，可以通过该方法访问到字节内部的原始数据块。