自古英雄出少年
现代少年多极客

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方法,可以通过该方法访问到字节内部的原始数据块。

赞(0)
未经允许不得转载:极客少年 » HTML5—FileApi
分享到: 更多 (0)

极客少年

大道至简码支付源码