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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5 资料API

FileList对象与file对象

Blob对象

示例1

相关资料更多>

推荐阅读更多>