日期:2014-05-17 浏览次数:20627 次
在HTML5中,提供了一个关于文件操作的文件API,通过使用这个接口,对于从Web页面上访问本地文件系统的相关处理将会变得十分简单。
FileList对象表示用户选择的文件列表。在HTML5中,通过在file控件中添加multiple属性,可以使用控件内一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则为这些file对象的列表,代表用户选择的所有文件。file对象具有两个属性:name属性表示文件夹名(不包含路径);lastModifiedDate属性表示文件的最后修改日期。
Blob表示二进制原始数据,它提供一个slice方法,可以通过该方法访问到字节内部的原始数据块。事实上,file对象也是继承了这个Blob对象。
Blob对象有两个属性:size属性表示一个Blob对象的字节长度;type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串。
另外,HTML5中已经对file控件添加了accept属性,该属性让file控件只能打官腔某种类型的文件,该属性的使用方法如下:
<input type="file" id="file" accept="image/*"/>
为了方便,给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