16.3  获取文件的类型和大小

16.3 获取文件的类型和大小

在HTML 5中，可以使用Blob接口获取某个文件的类型和大小。Blob表示二进制数据块，在此接口中提供了一个名为slice方法，通过该方法可以访问指定长度与类型的字节内部数据块。该接口提供了如下两个属性：

■size：表示返回数据块的大小。

■type：表示返回数据块的MIME类型，如果不能确定数据块的类型，则返回一个空字符串。

由此可见，实质上是Blob接口的一个实体，完全继承了该接口中的方法与属性。

实例文件3.html的实现代码如下。

在上述代码中，当“file”类型的<input>元素选择上传文件时，将触发“onChange”事件。在该事件中，调用自定义的函数fileUpload_GetFileList（this.files），其中，实参“this.files”表示所选择的上传文件集合，即FileList对象。在函数fileUpload_GetFileList（）中，遍历传回的FileList文件集合，获取单个的“file”对象。该对象通过继承Blob接口的属性，返回文件的名称、类型、大小信息，并将这些信息以叠加的方式保存在变量“strLi”中；最后将变量的内容赋值给ID号为“uIUpload”的列表元素，通过该元素，将上传文件的信息展示在页面中。

函数fileUpload_GetFileList（this.files）是在文件js3.js中定义的，此文件的代码如下。

单击“选择文件”按钮，可以选取多个需要上传的文件。如图16-4所示。

图16-4 同时选择多个文件

选择多个文件后，将在页面中以列表的方式展示所选文件的名称、类型、大小信息。如图16-5所示。

图16-5 执行效果