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原理示意图. 图 ...
随机推荐
- GNU project C
gcc - GNU project C and C++ compiler gcc [option] file... preprocessing compila ...
- JSP 登录页面
1. index.jsp来提交请求 2. login.jsp来检查数据库数据 3. 需要注意的是,下载下来的mysql.conection jar包需要放到WEB-INF下面的lib文件夹下 jsp ...
- UVA- 1504 - Genghis Khan the Conqueror(最小生成树-好题)
题意: n个点,m个边,然后给出m条边的顶点和权值,其次是q次替换,每次替换一条边,给出每次替换的边的顶点和权值,然后求出这次替换的最小生成树的值; 最后要你输出:q次替换的平均值.其中n<30 ...
- Codelab for Android Design Support Library used in I/O Rewind Bangkok session
At the moment I believe that there is no any Android Developer who doesn't know about Material Desig ...
- LeetCode (85): Maximal Rectangle [含84题分析]
链接: https://leetcode.com/problems/maximal-rectangle/ [描述] Given a 2D binary matrix filled with '0's ...
- python 代码格式化工具：YAPF
学习资料: https://github.com/google/yapf 背景 现在的大多数 Python 代码格式化工具(比如:autopep8 和 pep8ify)是可以移除代码中的 lint 错 ...
- 什么是ARC
arc就是自动引用计算.英文名Automatic Reference Counting.在一开始的IOS开发中,内存管理是需要手动的,对某个资源的引用,引用后就对其计算+1,当不再使用就-1,当计算为 ...
- Linux 相关scsi命令
Linux 相关scsi命令 由于前段时间存储扩容,对存储操作较多,下面记录了常用的操作: lsscsi命令:显示scsi设备信息 #lsscsi [0:0:0:2] disk IBM ...
- Redis的Java客户端Jedis的八种调用方式(事务、管道、分布式)介绍
jedis是一个著名的key-value存储系统,而作为其官方推荐的java版客户端jedis也非常强大和稳定,支持事务.管道及有jedis自身实现的分布式. 在这里对jedis关于事务.管道和分布式 ...
- do while 与while的区别！
#include "stdio.h" main() { ,b=; do{ //在这里do while 是先完成{}里的运算在判断while()里的循环// a=a+b; b++; ...