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原理示意图. 图 ...
随机推荐
- www.nt-kaisheng.com
线号机耗材网站开发架构,是基于丽标线号机_凯标线号机_耗材|色带|号码管批发|电缆标牌_南通凯胜电器有限公司,进行的服务需求的网站. 南通凯胜电器有限公司网站与手工编码比起来,HTML5框架在准确性和 ...
- go语言细节
1 数组与字符串为值类型,切片.映射.通道为值类型,赋值需注意. package main import ( "fmt" ) func main() { //数组 a1 := [] ...
- wlan的QOS配置
WLAN QoS配置 1.1 WLAN QoS简介 802.11网络提供了基于竞争的无线接入服务,但是不同的应用需求对于网络的要求是不同的,而原始的网络不能为不同的应用提供不同质量的接入服务,所以已 ...
- Unity NGUI 网络斗地主 -发牌 脚本交互
Unity NGUI 网络斗地主 -发牌 脚本交互 @By 灰太龙 Unity4.2.1f4 NGUI 3.0.4 本篇说的问题是脚本与控件的交互! 现在对界面进行了改进,先看副图! 1.制作发牌效果 ...
- IBM Websphere 说明文档
http://pic.dhe.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=%2Fcom.ibm.websphere.nd.doc%2Finfo%2F ...
- Java编译原理
http://wenku.baidu.com/view/f9b1734b87c24028915fc3a3.html Java编译原理 1． 关于动态加载机制 学习Java比C++更容易理解OOP的思想 ...
- GeoPandas官方中文文档--译著
译自GeoPandas 0.1.0 文档(原版译著,有错误欢迎交流,转载请注明) GeoPandas是一个开源项目,它的目的是使得在Python下更方便的处理地理空间数据.GeoPandas扩展了pa ...
- Codeforces Round #335 (Div. 1)--C. Freelancer's Dreams 线性规划对偶问题+三分
题意:p, q,都是整数. sigma(Ai * ki)>= p, sigma(Bi * ki) >= q; ans = sigma(ki).输出ans的最小值 约束条件2个,但是变量k有 ...
- java中字节流和字符流的区别
流分类: 1.Java的字节流 InputStream是所有字节输入流的祖先,而OutputStream是所有字节输出流的祖先.2.Java的字符流 Reader是所有读取字符串输入流的祖先,而 ...
- [置顶] Ubuntu 12.04以上如何恢复GNOME传统界面
Ubuntu 12.04以上开始使用Unity作为界面系统了,对于一直以来使用GNOME界面的人来说太不适应了,以下是如何在Ubuntu 12.04上恢复GNOME桌面 打开Linux终端上输入以下命 ...