html5 filelist,HTML5 文件API FileList对象、file对象、Blob对象

文件API

在HTML5中，提供了一个关于文件操作的文件API(应用程序编程接口)，通过使用这个API，对于从Web页面上访问本地文件系统的相关处理将会变得十分简单。本文将针对这个文件API做详细介绍。另外，关于文件API，到目前为止只有部分浏览器对它提供支持，譬如最新版的Firefox浏览器。

FileList对象与file对象

FileList对象表示用户选择的文件列表。在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，通过添加multiple属性，file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，name属性表示文件名，不包括路径，lastModifiedDate属性表示文件的最后修改日期。以下代码清单为一个使用FileList对象与file对象的示例。

function ShowFileName()

{

var file;

//document.getElementById("file").files返回FileList文件列表对象

for(var i=0;i

{

//file对象为用户选择的单个文件

file=document.getElementById("file1").files[i];

//此处您可以针对FileList文件列表中每个文件进行多种处理,本例中只弹出文件名

alert("文件名: "+file.name+" 最后修改日期: "+file.lastModifiedDate);

}

}

document.getElementsByClassName("upload-button-1")[0].οnclick=function(){ShowFileName();}

Blob对象

Blob表示二进制原始数据，它提供一个slice方法，可以通过该方法访问到字节内部的原始数据块。事实上，上面提到的file对象也继承了这个Blob对象。Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。以下代码清单对Blob对象及它的两个属性做一些解释。

文件字节长度：
文件类型：

function ShowFileType(){

var file;

//得到用户选择的第一个文件

file=document.getElementById("file2").files[0];

var size=document.getElementById("size");

//显示文件字节长度

size.innerHTML=file.size;

var type=document.getElementById("type");

//显示文件类型

type.innerHTML=file.type;

}

document.getElementsByClassName("upload-button-2")[0].οnclick=function(){ShowFileType();}

文件字节长度：

文件类型：

请注意：对于图像类型的文件，Blob对象的type属性都是以“image/”开头的，后跟图像类型，利用此特性我们可以在JavaScript中判断用户选择的文件是否为图像文件，如果在批量上传时，只允许上传图像文件，可以利用该属性，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传。请看下面代码示例。

function FileUpload(){

var file;

for(var i=0;i

file=document.getElementById("file3").files[i];

if(!/image\/\w+/.test(file.type)){

alert(file.name+"不是图像文件");

continue;

}else{

alert(file.name+"文件已上传");

}

}

}

document.getElementsByClassName("upload-button-3")[0].οnclick=function(){FileUpload();}

另外，HTML5中已经对file控件添加了accept属性，企图让file控件只能接受某种类型的文件，但是目前各主流浏览器对其的支持都只限于在打开文件选择窗口时，默认选择图像文件而已，如果选择其他类型文件，file控件也能正常接受。对file控件使用accept属性的方法如下所示。