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>

View Code

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接口

关于FileReader API

<!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');}//判断浏览器支付支持FileReaderif (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>

View Code

转载于:https://www.cnblogs.com/tianma3798/p/4293659.html

HTML5 FileAPI读取实例---（一）相关推荐

《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:97871153634 ...
免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口. FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和F ...
《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
vue $ 符号（例如vm.$data vs vm.data）：读取实例属性 vs 读取 data 数据
vm.$ 读取实例中属性列表(第一层) vm.data 直接读取实例 data 数据属性中的数据值(第二层).等价于 vm.$data.data <script>var ok=new Vu ...
python如何读取tfrecord_TFRecord格式存储数据与队列读取实例
Tensor Flow官方网站上提供三种读取数据的方法 1. 预加载数据:在Tensor Flow图中定义常量或变量来保存所有数据,将数据直接嵌到数据图中,当训练数据较大时,很消耗内存. 如 x1=t ...
html5 游戏动画设计,HTML5 Canvas 动画实例
原标题:HTML5 Canvas 动画实例在开发在线游戏时,绘制动画是非常重要的.本节介绍一个使用 Canvas API 实现的动画实例--游戏人物的跑步动画. 动画的概念及原理 1．动画动画是通 ...
html坐标定位图解,HTML5地理定位实例
本文实例讲述了html5获取地理定位的方法,分享给大家供大家参考.具体方法如下: html5 获取坐标代码如下: 复制代码代码如下: test1.html 点击这个按钮,获得您的坐标: 试一下 var ...
[Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较的补充和实例说明各种技术的使用方式. VML 的用法和实例引入命名空间之后,就可以 ...
HTML5+CSS3小实例：有趣的沙漏加载动画
HTML5+CSS3做一个有趣的沙漏加载动画,如此精致的沙漏,如果我说这个没有用到图片,纯CSS实现,你信吗?这个loading虽然看起来简单,但是你仔细拆解一番,你会发现其中居然用了四个动画,所以这 ...
HTML5+CSS3小实例：炫彩的发光字特效
前言: 今天我们向大家精选了一款HTML5+CSS3文字特效,文字特效有超酷的动画类型,不多说,一起来看看. 描述: 这款文字特效既有倒影的效果,又有随机的颜色,看起来非常的炫酷.全文基于 HTML5 ...

HTML5 FileAPI读取实例---（一）

HTML5 FileAPI读取实例---（一）相关推荐

最新文章

热门文章