HTML5 FileAPI图文代码分享

百变鹏仔 3个月前 (10-18) #H5教程

文章标签代码

在html5中，提供了一个关于文件操作的api，通过这个api，对于从web页面上访问本地文件系统的相关处理变得十分简单。到目前为止只有部分浏览器对它提供支持。

1.FileList对象和File对象

FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。

<!DOCTYPE html><html>    <head>        <meta charset=&#39;UTF-8&#39;/>        <title>FileList and File </title>        <script type="text/javascript" language="JavaScript">function showFiles(){var file,                len = document.getElementById(&#39;file&#39;).files.length;//返回FileList文件列表对象for (var i=0; i < len; i++) {                  file = document.getElementById(&#39;file&#39;).files[i];                  alert(file.name);                };                            }            </script>                   </head>    <body>        <input type="file" id=&#39;file&#39; multiple="multiple" width="80px"/>        <input type="button" id="bt1" value="click" onclick="showFiles();"/>    </body></html>

2.Blob对象

提到Blob对象，估计有人会想起OracleDB中Blob字段，意义上有些类似。HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。

立即学习“前端免费学习笔记（深入）”；

Blob对象的两个属性，size：表示一个对象的字节长度。type：表示一个对象的MIME类型，如若是未知类型返回空字符串。

function showFileInfo(){                var file = document.getElementById(&#39;file&#39;).files[0];                var size = document.getElementById(&#39;fileType&#39;);                var type = document.getElementById(&#39;fileSize&#39;);                size.innerHTML = file.size;                type.innerHTML = file.type;            }

对于图像类型的文件，Blob对象的type属性都是以image/开头，可以利用这个特性对用户选择的文件类型做判断。

function showFileInfo(){                var file = document.getElementById(&#39;file&#39;).files[0];                if(checkImage(file)){                var size = document.getElementById(&#39;fileType&#39;);                var type = document.getElementById(&#39;fileSize&#39;);                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接口

3.1接口方法

FileReader接口提供了四个方法，其中3个用来读取文件，1个用来中断文件的读取。

方法名	参数	描述
readAsBinaryString()	file	将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件
readAsDataURL()	file	将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件
readAsText()	file [encoding]	将文件以文本的方式读取，其中第二个参数为文本的编码。
abort()	(none)	中断读取操作。

需要注意的是，无论读取成功还是失败，方法都不会返回读取结果，结果返回在result属性中。

3.2接口事件

FileReader接口提供了一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	数据读取中断时发生
onerror	数据读取出错时发生
onloadstart	数据读取开始时发生
onload	数据读取成功完成时发生
onloadend	数据读取完成时发生无论读取成功还是失败
onprogess	数据读取中

3.3实例

<!DOCTYPE html><html>    <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(&#39;file&#39;).files[0];                 result = document.getElementById(&#39;result&#39;);            }if(typeof FileReader == &#39;undefined&#39;){                result.innerHTML = "你的浏览器不支持 FileReader";                file.setAttribute("disabled","disabled");            }function readAsDataURL(){if(!/image\/\w+/.test(file.type)){                    alert(file.name + &#39;不是一个图片类型的文件&#39;);                }else{var reader = new FileReader();                    reader.readAsDataURL(file);                    reader.onload = function(e){                                                result.innerHTML = "<img  src=" + reader.result +"/ alt="HTML5 FileAPI图文代码分享" >";                    };                }            }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=&#39;file&#39;/>            <input type=&#39;button&#39; 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图文代码分享

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集