文件API

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

FileList对象与file对象

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

<p><input type="file" id="file1" size="80" multiple><input type="button" class="upload-button-1" value="文件上传"></p>
<script type="text/javascript">
function ShowFileName()
{
	var file;
	//document.getElementById("file").files返回FileList文件列表对象
	for(var i=0;i<document.getElementById("file1").files.length;i++)
	{
		//file对象为用户选择的单个文件
		file=document.getElementById("file1").files[i];
		//此处您可以针对FileList文件列表中每个文件进行多种处理,本例中只弹出文件名
		alert("文件名: "+file.name+" 最后修改日期: "+file.lastModifiedDate);
	}
}
document.getElementsByClassName("upload-button-1")[0].onclick=function(){ShowFileName();}
</script>

Blob对象

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

<p><input type="file" id="file2"><input type="button" class="upload-button-2" value="显示文件信息"></p>
<p>文件字节长度：<span id="size"></span><br>文件类型：<span id="type"></span></p>
<script type="text/javascript">
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].onclick=function(){ShowFileType();}
</script>

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

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

<p><input type="file" id="file3" multiple><input type="button" class="upload-button-3" value="文件上传"></p>
<script type="text/javascript">
function FileUpload(){
	var file;
	for(var i=0;i<document.getElementById("file3").files.length;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].onclick=function(){FileUpload();}
</script>

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