在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>tbody, #fileContent, #console").empty(); $("#count, #sum").val(0).text(0); }); });
FileReader接口
FileReader接口主要用来把文件读入内在,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。如下代码可以检测浏览器是否支持此接口:
if(typeof FileReader == "undefined") { alert("您的浏览器未实现FileReader接口!"); }
FileReader接口的方法
FileReader接口拥有4个方法,其中3个用以读取文件,另一个用来将读取过程中断。注意:无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
- readAsText(file[, encoding]):该方法有两个参数,其中第二个参数是文本的编码方式,默认值为UTF-8。该方法将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
- readAsBinaryString(file):该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
- readAsDataURL(file):该方法将文件读取为一串Data URL字符串,该方法事实上是将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件通常是指图像与html等格式的文件。
- abort():中断读取操作。
FileReader接口的事件
除了上述方法之外,FileReader接口还包含了一套完整的事件模型,用于捕获读取文件时的状态,这些事件如下:
- onloadstart:数据读取开始时触发。
- onprogress:数据读取中。
- onload:数据读取成功完成时触发。
- onloadend:数据读取完成时触发,无论成功或失败。
- onabort:数据读取中断时触发。
- onerror:数据读取出错时触发。
我们需要编写的代码主要都是在onprogress事件中,例如,可以用HTML5中的新增元素progress来显示大文件的读取完成百分比。
示例2
为方便使用FileReader接口,给jQuery增加几个函数如下:
var getFileReader = function(handler) { var reader = new FileReader(); reader.onloadstart = handler.loadStart; reader.onprogress = handler.progress; reader.onload = handler.load; reader.onloadend = handler.loadEnd; reader.onabort = handler.abort; reader.onerror = handler.error; return reader; }; jQuery.fn.readAsText = function(handler, encoding) { if (typeof encoding == "undefined") { encoding = "UTF-8"; } var files = this.files(); var reader = null; for ( var i = 0; i < files.length; i++) { reader = getFileReader(handler); reader.readAsText(files[i], encoding); } return this; }; jQuery.fn.readAsBinaryString = function(handler) { var files = this.files(); var reader = null; for ( var i = 0; i < files.length; i++) { reader = getFileReader(handler); reader.readAsBinaryString(files[i]); } return this; }; jQuery.fn.readAsDataURL = function(handler) { var files = this.files(); var reader = null; var imageHandler = function(event) { $("<img>").attr("src", event.target.result).appendTo("#fileContent"); }; for ( var i = 0; i < files.length; i++) { reader = getFileReader(handler); if (!/image\/\w+/.test(files[i].type)) { reader.readAsDataURL(files[i]); } else { reader.onload = imageHandler; reader.readAsDataURL(files[i]); } } return this; };
给上述函数传入的事件处理器函数代码如下:
$(function() { var createTag = function(txt) { $("#console").append($("<span>").text(txt).after("<br/>")); }; var handler = { load : function(event) { createTag("this is FileReader's onload event."); $("<p>").append(event.target.result).appendTo("#fileContent"); }, loadStart : function(event) { createTag("this is FileReader's onloadstart event."); }, loadEnd : function(event) { createTag("this is FileReader's onloadend event."); }, abort : function(event) { createTag("this is FileReader's onabort event."); }, error : function(event) { createTag("this is FileReader's onerror event."); }, progress : function(event) { createTag("this is FileReader's onprogress event."); } }; });
最后,三个按钮的click事件代码如下:
$(function() { $("#txtBtn").click(function(event) { $("#selectFiles").readAsText(handler); }); $("#binBtn").click(function(event) { $("#selectFiles").readAsBinaryString(handler); }); $("#urlBtn").click(function(event) { $("#selectFiles").readAsDataURL(handler); }); });
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1705绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1113UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1326绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1720选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1435使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1531canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1508CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5440Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4667基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4141基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 2017基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1875applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1566离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2597本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1621Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1246video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1749音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 955video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4961在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ...
相关推荐
Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON,KML,GPX ) 加载为层 Leaflet.FileLayer使用 API 将本地文件加载到映射中,不需要服务器调用就可以加载 !简单的地图控件用户可以在本地浏览文件它被本地...
HTML5文件API是Web开发中的一个关键特性,它允许开发者在浏览器环境中处理本地文件,而无需服务器的介入。这一功能极大地扩展了Web应用的能力,使得用户可以上传、读取、写入甚至修改本地文件,提高了交互性和用户...
除了 HTML5 文件 API 之外,filerun.js 没有任何外部依赖项。 特征 多个文件同时上传 可恢复上传的分块传输 中断时自动重试 可以暂停上传队列,甚至可以暂停单个文件 浏览器内存占用低,允许在同一会话中上传数百个...
HTML5 API调用示例是现代网页开发中的关键部分,它极大地扩展了Web应用程序的功能,使其可以实现更多原生应用的特性。W3C(万维网联盟)是定义HTML5标准的权威组织,它的API规范为开发者提供了丰富的工具集,以创建...
HTML5 文件API 文件上传 支持拖拽的文件上传
在描述中提到的“支持对文件类型,大小,以及针对图片的尺寸进行校验”,这是HTML5文件API的关键应用。开发者可以利用File API来获取文件的相关信息,如文件类型、大小等,然后根据业务需求进行校验,确保上传的文件...
标题中的"twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_"似乎是指一个基于HTML5的Twaver版本5.9.0的应用程序接口(API)文档。Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织...
本次实验主要包含了两个基于HTML5媒体API的应用设计实例,一是基于HTML5音频API的音乐播放器的设计与实现,二是基于HTML5视频API的在线教学视频的设计与实现。要求做基于HTML5音频API的音乐播放器的设计与实现,基于...
6. Drag and Drop:HTML5的拖放API允许用户在网页上直接拖放元素,提高了交互性,适用于文件上传、内容排序等功能。 7. Web Workers:为了解决JavaScript单线程执行导致的性能问题,HTML5引入了Web Workers,它们在...
HTML5 文件 API 是一种异步 API,用于访问本地文件,并基于回调。 由于其嵌套性质,API 的使用很快就因为噩梦。 Usefs 可以轻松地将 100 行 HTML5 File API 代码变成一行代码。 它是基于 Apache Cordova/PhoneGap ...
行阅读器使用 HTML5 文件 API 逐行读取文件。用法用户选择文件后: // Grab a file referencevar file = document . getElementById ( 'my-file-input' ) . files [ 0 ] ;// Create a new instance of the ...
在前端,可以使用HTML5的`FormData`对象和`XMLHttpRequest`或`fetch` API来发送文件。下面是一个简单的JavaScript示例: ```html 上传 document.getElementById('uploadForm').addEventListener('submit', ...
本文将深入探讨如何在WebAPI中实现文件上传功能,并介绍如何在MVC应用程序中调用这个API。 一、WebAPI中的文件上传 1. **配置路由**:首先,我们需要在WebAPI的`WebApiConfig.cs`文件中设置允许接收多部分/表单...
总结,通过.NET MVC调用WebApi接口进行文件上传涉及客户端HTML表单的创建、服务器端MVC控制器和WebApi控制器的配置以及文件的接收和处理。在实际项目中,还要注意性能优化、错误处理和安全性检查,以提供稳定可靠的...
在5+ Runtime环境中,通常情况下需要html页面解析完成后才会注入5+ API,执行的顺序为: 1. 加载html页面 2. 解析html页面(下载script/link等节点引用的资源,如js/css文件) 3. 触发DOMContentLoaded事件 4. 注入5...
赠送jar包:archunit-junit5-api-0.14.1.jar;...使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。
1. **FileList对象**:FileList是一个文件对象的集合,通常由HTML文件输入元素`<input type="file">`生成。在HTML4中,用户只能选择一个文件,但在HTML5中,通过添加`multiple`属性,用户可以选择多个文件。每个文件...
4. HTML5 文件API:除了FileReader外,HTML5引入了更多的文件操作API,如FileList(表示一组File对象)和FormData(用于发送键值对数据,常用于AJAX请求)。这些API使得在JavaScript中处理文件变得更加灵活。 5. ...
在给定的压缩包文件中,我们关注的重点是HTML5的Canvas 2D API和CSS3.0 API。 Canvas 2D API是HTML5的一个重要组成部分,它提供了一个在网页上绘制图形、图像、文字等元素的JavaScript接口。通过这个API,开发者...
在探讨HTML5文件上传中文文档时,我们将重点介绍HTML5提供的文件操作API,这是一个强大的功能集合,使得在浏览器端操作文件变得更加方便和安全。文档中提到了几个关键的概念和API,包括File API、FileReader API、...