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原理示意图. 图 ...
随机推荐
- JSP - request - 1
<%@ page language="java" contentType="text/html;charset=utf8" %> <%@ pa ...
- tail tailf 使用
tail -f tailf 用来查看日志的新增内容, tailf 能一直打印日志
- vsphere 出现“在主机的当前连接状况下不允许执行该操作”
问题: 登录vsphere client启动虚拟机出现“在主机的当前连接状况下不允许执行该操作” 解决方法: 1.选择主机->右键->断开 2.选择主机->右键->连接 3.在 ...
- Eclipse调试的一些小技巧
不要使用System.out.println作为调试工具 启用所有组件的详细的日志记录级别 使用一个日志分析器来阅读日志 1.条件断点 想象一下我们平时如何添加断点,通常的做法是双击行号的左边.在de ...
- java学习之数组排序一：选择排序
在讲完java中数组定义的两种方式之外,这里需要讲一下对数组常用的方法,第一个就是排序. 加入我们现在有个数组:int[] arr = {12,87,34,3,98,33,103}; 思路1: 1.首 ...
- Poetize6: IncDec Sequence
3043: IncDec Sequence Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 233 Solved: 132[Submit][Statu ...
- 怎么添加项目到SVN上面
一.通过SVN客户端向服务器上面添加项目 1.在服务器上面创建一个文件夹,文件夹以项目名称命名. 2.在合适目录下右击后,点击SVN Checkout,将你在服务器上面创建的目录checkout下来 ...
- C#:ref和out的联系及区别
一:ref 关键字使参数按引用传递. 其效果是,当控制权传递回调用方法时,在方法中对参数所做的任何更改都将反映在该变量中.若要使用 ref 参数,则方法定义和调用方法都必须显式使用 ref 关键字. ...
- svn server安装配置
安装平台:RHEL5 1.安装软件:httpd.subversion.mod_dav_svn 2.修改配置 修改/etc/httpd/conf.d/subversion.conf.eg: LoadMo ...
- greenplum和postgresql
想着要不要写,两个原因"懒"和"空".其实懒和空也是有联系的,不是因为懒的写,而是因为对PostgreSQL和Npgsql的知识了解匮乏,也就懒得写.好了,开头 ...