您现在的位置是：首页 > 文章详情

Html5 学习系列（四）文件操作API

日期：2018-06-01点击：337收藏

引言

在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的web应用依赖了第三方的插件，而不是很独立，不够通用。在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作，让Web应用不再那么蹩脚，而之前Web应用如果不借助第三方插件，那就是个shit！但是最新的标准中大部分浏览器都已经实现了文件的读取API，文件的写入，文件和文件夹的最新的标准刚制定完毕，相信后面随着浏览器的升级这些功能肯定会实现的非常好，接下来我主要给大家介绍文件读取的几个API。

几个重要的JS对象

1):FileList对象
它是File对象的一个集合，在Html4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。demo：<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /> ；下面是关于FileList对象的API的原型：

interface FileList { getter File? item(unsigned long index); readonly attribute unsigned long length; };

2)Blob对象

其实就是一个原始数据对象，它提供了slice方法可以读取原始数据中的某块数据。另外有两个属性：size（数据的大小），type（数据的MIME类型）；看下面的是W3C的API原型：

 interface Blob { readonly attribute unsigned long long size; readonly attribute DOMString type; //slice Blob into byte-ranged chunks Blob slice(optional long long start, optional long long end, optional DOMString contentType); };

3）File对象
继承自Blob对象，指向一个具体的文件，它还有两个属性：name（文件名), lastModifiedDate（最后修改时间)；然后让我们看一些W3C的标准：

 interface File : Blob { readonly attribute DOMString name; readonly attribute Date lastModifiedDate; };

4）FileReader对象
设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效。然后让我们看一些W3C的标准：

[Constructor] interface FileReader: EventTarget { // async read methods void readAsArrayBuffer(Blob blob); void readAsBinaryString(Blob blob); void readAsText(Blob blob, optional DOMString encoding); void readAsDataURL(Blob blob); void abort(); // states  const unsigned short EMPTY = 0; const unsigned short LOADING = 1; const unsigned short DONE = 2; readonly attribute unsigned short readyState; // File or Blob data  readonly attribute any result; readonly attribute DOMError error; // event handler attributes attribute [TreatNonCallableAsNull] Function? onloadstart; attribute [TreatNonCallableAsNull] Function? onprogress; attribute [TreatNonCallableAsNull] Function? onload; attribute [TreatNonCallableAsNull] Function? onabort; attribute [TreatNonCallableAsNull] Function? onerror; attribute [TreatNonCallableAsNull] Function? onloadend; };

这个对象是非常重要第一个对象，它提供了四个读取文件数据的方法，这些方法都是异步的方式读取数据，读取成功后就直接将结果放到属性result中。所以一般就是直接读取数据，然后监听此对象的onload事件，然后在事件里面读取result属性，再做后续处理。当然abort就是停止读取的方法。其他的就是事件和状态不再赘述。

三个方法都介绍一下：

readAsBinaryString(Blob blob); → 传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。

readAsText(Blob blob, optional DOMString encoding);→第一个参数传入Blog对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。

readAsDataURL(Blob blob);→传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。

读取文件上传控件里的文件并将内容已不同的方式展现到浏览器里面实例

在展示代码之前，之前我们操作一个图片文件，都是先将图片上传到服务器端，然后再使用一个img标签指向到服务器的url地址，然后再进行一个使用第三方插件进行图片处理，而现在这一切都不需要服务器端了，因为FileReader对象提供的几个读取文件的方法变得异常简单，而且全不是客户端js的操作。且看下面的demo：

案例一：获取上传文件的文件名(在线演示地址)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnGetFile").click(function (e) { var fileList = document.getElementById("fileDemo").files; for (var i = 0; i < fileList.length; i++) { if (!(/image\/\w+/.test(fileList[i].type))) { $("#result").append("<span>type:"+fileList[i].type+"--******非图片类型*****--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />"); } else { $("#result").append("<span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />"); } } }); }); </script> </head> <body> <form action="/home/index" method="POST" novalidate="true"> <input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/> <input type="button" value="获取文件的名字" id="btnGetFile"/> <div id="result"></div> </form> <hr/> </body> </html>

案例二：读取上传文件内容，然后将文件内容直接读取到浏览器上(在线演示地址)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> if(typeof FileReader == "undified") { alert("您老的浏览器不行了！"); } function showDataByURL() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsDataURL(resultFile); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />"; }; } } function showDataByBinaryString() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); //异步方式，不会影响主线程 reader.readAsBinaryString(resultFile); reader.onload = function(e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } function showDataByText() { var resultFile = document.getElementById("fileDemo").files[0]; if (resultFile) { var reader = new FileReader(); reader.readAsText(resultFile,'gb2312'); reader.onload = function (e) { var urlData = this.result; document.getElementById("result").innerHTML += urlData; }; } } </script> </head> <body> <input type="file" name="fileDemo" id="fileDemo" multep/> <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/> <input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/> <input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/> <div id="result"> </div> </body> </html>