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原理示意图. 图 ...
随机推荐
- 最新选择Godaddy主机方案美国数据中心教程指导
随着Godaddy官方管理层的变动之后,主营重心已经从当初的域名开始转向到域名和主机产品上.这点我们从其发布域名优惠信息的频率也可以看到,而且我们可以看到常年的主机半价优惠,以及针对主机销售年付方案赠 ...
- [BZOJ 3238] [AHOI 2013] 差异 【后缀数组 + 单调栈】
题目链接:BZOJ - 3238 题目分析 显然,这道题就是求任意两个后缀之间的LCP的和,这与后缀数组的联系十分明显. 求出后缀数组后,求出字典序相邻两个后缀的LCP,即 Height 数组. 那么 ...
- C 和 OC 字符串转换 NSString 和 char * 转换 const char* 与 char *
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { char *s = "He ...
- Agri-Net poj 1258
WA了好多次,注意语言和数据范围 Description Farmer John has been elected mayor of his town! One of his campaign pro ...
- java学习面向对象之static内存图解
上一节当中描述了static的用法,以及成员变量和静态变量的区别.但是static除了可以修饰成员变量使之成为静态变量外,他还可以同时修饰函数,使之成为静态函数,我们来看一个例子: class Sta ...
- AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 《转》
AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: 测试代码如下: <%@ Page Language="C#" AutoE ...
- 【REST API】
微信公众平台开发者文档 RESTful API 设计最佳实践 登录判断写去接口里 PUT 新建一个资源POST 更新一个资源GET 查看一个资源DELETE 删除一个资源
- 生成树的计数(基尔霍夫矩阵)：BZOJ 1002 [FJOI2007]轮状病毒
1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 3928 Solved: 2154[Submit][Statu ...
- 动态规划(状态压缩)：BZOJ 2621 [Usaco2012 Mar]Cows in a Skyscraper
2621: [Usaco2012 Mar]Cows in a Skyscraper Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 303 Sol ...
- QDomDocument Access violation writing location
今天犯了一个非常2的错误! 为了将面板参数保存起来,选择用QDomDocument构造Dom树,然后用doc.toString()方法返回符合xml格式的QString.如: QString CutF ...