HTML5 FileAPI读取实例---（一）
在HTML5中，提供了一个关于文件操作的API，通过这个API，对于从web页面上访问本地文件系统的相关处理变得十分简单。到目前为止只有部分浏览器对它提供支持。
1.FileList对象和File对象
FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='UTF-8'/>
5 <title>FileList and File </title>
6 <script type="text/javascript" language="JavaScript">
7 function showFiles(){
8 var file,
9 len = document.getElementById('file').files.length;//返回FileList文件列表对象
10 for (var i=0; i < len; i++) {
11 file = document.getElementById('file').files[i];
12 alert(file.name);
13 };
14
15 }
16 </script>
17 </head>
18 <body>
19 <input type="file" id='file' multiple="multiple" width="80px"/>
20 <input type="button" id="bt1" value="click" onclick="showFiles();"/>
21 </body>
22 </html>
2.Blob对象
提到Blob对象，估计有人会想起OracleDB中Blob字段，意义上有些类似。HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。
Blob对象的两个属性，size：表示一个对象的字节长度。type：表示一个对象的MIME类型，如若是未知类型返回空字符串。
function showFileInfo(){
var file = document.getElementById('file').files[0];
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
对于图像类型的文件，Blob对象的type属性都是以image/开头，可以利用这个特性对用户选择的文件类型做判断。
读取或预览图片
function showFileInfo() {
var file = document.getElementById('file').files[0];
if (checkImage(file)) {
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
else {
return;
}
}
function checkImage(file) {
if (!/img\/\w+/.test(file.type)) {
alert(file.name + "不是图片");
return false;
}
return true;
}
另外，file控件在HTML5标准中添加了accept属性，用来限制接受的文件类型，但目前各浏览器对齐支持都仅限于在打开文件选择窗口时默认的选择图像文件而已，如果选择其他类型，控件也能接受。
3.FileReader接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>FileReader</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<script type="text/javascript" language="JavaScript">
var file, result;
function myLoad() {
file = document.getElementById('file').files[0];
result = document.getElementById('result');
}
//判断浏览器支付支持FileReader
if (typeof FileReader == 'undefined') {
result.innerHTML = "你的浏览器不支持 FileReader";
file.setAttribute("disabled", "disabled");
}
function readAsDataURL() {
if (!/image\/\w+/.test(file.type)) {
alert(file.name + '不是一个图片类型的文件');
} else {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
result.innerHTML = "<img src=" + reader.result + "/>";
};
}
}
function readAsBinaryString() {
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function (e) {
result.innerHTML = reader.result;
};
}
function readAsText() {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (e) {
result.innerHTML = reader.result;
};
}
</script>
</head>
<body onload="myLoad();">
<p>
<input type="file" id='file' />
<input type='button' id="bt_DataURL" value="读取图片" onclick="readAsDataURL();" />
<input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();" />
<input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();" />
</p>
<div id="result"></div>
</body>
</html>
HTML5 FileAPI读取实例---（一）的更多相关文章
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- Java学习-019-Properties 文件读取实例源代码
在这几天的学习过程中,有开发的朋友告知我,每个编程语言基本都有相应的配置文件支持类,像 Python 编程语言中支持的 ini 文件及其对应的配置文件读取类 ConfigParse,通过这个类,用户可 ...
- Java学习-017-EXCEL 文件读取实例源代码
众所周知,EXCEL 也是软件测试开发过程中,常用的数据文件导入导出时的类型文件之一,此文主要讲述如何通过 EXCEL 文件中 Sheet 的索引(index)或者 Sheet 名称获取文件中对应 S ...
- Java学习-016-CSV 文件读取实例源代码
上文(CSV文件写入)讲述了日常自动化测试过程中将测试数据写入 CSV 文件的源码,此文主要讲述如何从 CSV 文件获取测试过程中所需的参数化数据.敬请各位小主参阅,若有不足之处,敬请大神指正,不胜感 ...
- Java学习-013-文本文件读取实例源代码（两种数据返回格式）
此文源码主要为应用 Java 读取文本文件内容实例的源代码.若有不足之处,敬请大神指正,不胜感激! 1.读取的文本文件内容以一维数组[LinkedList<String>]的形式返回,源代 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发
Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...
随机推荐
- Solr4.8.0源码分析(25)之SolrCloud的Split流程
Solr4.8.0源码分析(25)之SolrCloud的Split流程(一) 题记:昨天有位网友问我SolrCloud的split的机制是如何的,这个还真不知道,所以今天抽空去看了Split的原理,大 ...
- 单例模式在Unity中的应用
起因:每个游戏场景中都会有许多的游戏对象,而各个游戏场景之间也是同等的关系.如何去管理它们,是我们要解决的问题. 场景中各脚本间的直接访问,会在各脚本间形成一个巨大而又混乱的网络,这给以后代码的维护带 ...
- Delphi中的THashTable
在Delphi中,Inifiles单元中有一个TStringHash的类,不过它的Value仅支持Integer(其实也不是问题,有其它类型可以将变量变为Pointer),有点不舒服,今天没事做就把它 ...
- left join 、right join 、inner join和 full join的区别
内连接 INNER JOIN(等值连接):只显示两个表中联结字段相等的行.这个和用select查询多表是一样的效果,所以很少用到: 外连接:LEFT JOIN :以左表为基础,显示左表中的所 ...
- datagridview，textbox，combobox的数据绑定，数据赋值，picturebox的用法
一:datagridview数据绑定 二:textbox的数据绑定(datetimepicker) 总结: 最好还是写成双向绑定那种,不要再写出发事件了,只要在给textbox赋值就能重新绑定了,不然 ...
- 一招解决IE7无法访问https网页
很多人都遇到过这种情况: 自己的IE访问不了https的网页了,如果你百度的话,有人会告诉你注册一堆的dll文件,或者更改IE设置啦什么的.上午,我也遇到这个问题,这些方法都不管用.请教了高手,将方法 ...
- selenium python presence_of_element_located vs visibility_of_element_located
背景: 用WebDriverWait时,一开始用的是presence_of_element_located,我对它的想法就是他就是用来等待元素出现.结果屡屡出问题.元素默认是隐藏的,导致等待过早的就结 ...
- Jenkins 七： 部署到Tomcat
在build.xml定义了打包target之后,我们可以将打包生成的war文件直接部署到tomcat. 1. 建立Tomcat用户. 打开Tomcat安装路径下的 conf/tomcat-users. ...
- DNA Sequence - POJ 2778（AC自动机+矩阵乘法）
题目大意:DNA序列是有 ATGC 组成的,现在知道一些动物的遗传片段有害的,那么如果给出这些有害的片段,能否求出来所有长度为 N 的基因中有多少是不包含这些有害片段的. 分析:也是断断续续做了一 ...
- hdu 4424 & zoj 3659 Conquer a New Region (并查集 + 贪心)
Conquer a New Region Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...