日期:2014-05-17  浏览次数:20627 次

HTML5 文件API

在HTML5中,提供了一个关于文件操作的文件API,通过使用这个接口,对于从Web页面上访问本地文件系统的相关处理将会变得十分简单。

FileList对象与file对象

FileList对象表示用户选择的文件列表。在HTML5中,通过在file控件中添加multiple属性,可以使用控件内一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则为这些file对象的列表,代表用户选择的所有文件。file对象具有两个属性:name属性表示文件夹名(不包含路径);lastModifiedDate属性表示文件的最后修改日期。

Blob对象

Blob表示二进制原始数据,它提供一个slice方法,可以通过该方法访问到字节内部的原始数据块。事实上,file对象也是继承了这个Blob对象。

Blob对象有两个属性:size属性表示一个Blob对象的字节长度;type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串。

另外,HTML5中已经对file控件添加了accept属性,该属性让file控件只能打官腔某种类型的文件,该属性的使用方法如下:

<input type="file" id="file" accept="image/*"/>

示例1

为了方便,给jQuery提供访问FileList对象的功能,现扩展如下:

jQuery.fn.files = function() {
	return this[0].files;
};

示例所用HTML页面如下:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>文件API</title>
    <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="../js/fileReader.js"></script>
  </head>
  <body>
    <header>
    	<h1>文件API示例</h1>
    </header>
    <section>
    	<form id="filelist_sample" name="filelist_sample">
			<label for="selectFiles">请选择文件:</label>
			<input type="file" name="selectFiles" id="selectFiles" multiple="multiple"/>
			<button type="button" id="showInfoBtn" name="showInfoBtn">显示文件信息</button><br/>
			<button type="button" id="txtBtn" name="txtBtn">测试readAsText</button>
			<button type="button" id="binBtn" name="binBtn">测试readAsBinaryString</button>
			<button type="button" id="urlBtn" name="urlBtn">测试readAsDataURL</button>
		</form>
		<div id="fileContent"></div>
		<footer>
			<table id="info">
				<caption>文件信息</caption>
				<thead>
					<tr>
						<th>ID</th>
						<th>文件名</th>
						<th>文件类型</th>
						<th>文件大小(KB)</th>
						<th>最后修改日期</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>合计:</th>
						<th><meter id="count" value="0" min="0" max="10">0</meter></th>
						<th></th>
						<th><meter id="sum" value="0" min="0" >0</meter></th>
						<th><button type="button" id="clearBtn">清除信息</button></th>
					</tr>
				</tfoot>
			</table>
		</footer>
    </section>
    <footer>
    	<div id="console"></div>
    </footer>
  </body>
</html>

“显示文件信息”按钮的click事件代码如下:

$(function() {
	$("#showInfoBtn").click(function(event) {
		$("#clearBtn").click();
		var fileObjs = $("#selectFiles").files();
		var sum = 0, count = 1;
		var tbody = $("<tbody>");
		for ( var index = 0; index < fileObjs.length; index++) {
			$("<tr>").append($("<td>").append("<meter>").val(count).text(count))
				.append($("<td>").text(fileObjs[index].name))
				.append($("<td>").text(fileObjs[index].type))
				.append($("<td>").append($("<meter>").val(fileObjs[index].size).text(fileObjs[index].size / 1024)))
				.append($("<td>").text(fileObjs[index].lastModifiedDate)).appendTo(tbody);
			sum += fileObjs[index].size;
			count++;
		}
		$("td>meter, #sum").attr("max", 5 * 1024 * 1024);
		$("#info>thead").after(tbody);
		$("#count").attr("max", "10").val(fileObjs.length).text(fileObjs.length);
		$("#sum").val(sum).text(sum / 1024);
	});
});

“清除信息”按钮的click事件代码如下:

$(function() {
	$("#clearBtn").click(function(event) {
		$("#info&g