HTML5程序设计-HTML5表单及文件处理.pptVIP

3.4.1 选择文件的表单控件 【例3-24】 定义一个表单form1，其中包含一个用于选择文件的控件，代码如下： input type=file id=Files name=files[] multiple / multiple属性用于定义可以选择多个文件。 3.4.2 检测浏览器是否支持HTML5 File API 在HTML5 File API中定义了一组接口，包括FileList接口、File接口、Blob接口、FileReader接口等。 检测浏览器是否支持HTML5 File API实际上就是检测浏览器对这些接口的支持情况。使用window.FileList属性可以判断浏览器是否支持FileList接口；使用window.File属性可以判断浏览器是否支持File接口；使用window. Blob属性可以判断浏览器是否支持Blob接口；使用window. FileReader属性可以判断浏览器是否支持FileReader接口。 如果以上属性都为True，则说明浏览器对HTML5 File API完全支持，否则说明不支持。 【例3-20】 在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持HTML5 File API。定义按钮的代码如下： button id=check onclick=check();检测浏览器是否支持HTML5 File API/button 单击按钮check将调用check()函数。check()函数的定义代码如下： script type=text/javascript function check(){ if(window.File window.FileReader window.FileList window.Blob){ alert(您的浏览器完全支持HTML5 File API。); } else{ alert(您的浏览器不支持HTML5 File API。); } } /script 3.4.3 FileList接口 FileList接口的定义代码如下： interface FileList { getter File item(unsigned long index); readonly attribute unsigned long length; }; FileList接口的成员说明如下： ? item方法，返回FileList数组的第index个数组元素，一个File对象。 ? length，数组元素的数量。 File接口 FileList接口的数组元素是一个File接口，它表示一个文件对象，其定义代码如下： interface File : Blob { readonly attribute DOMString name; readonly attribute Date lastModifiedDate; }; File接口定义了下面2个属性： ? name，返回文件名，不包含路径信息。 ? lastModifiedDate，返回文件的最后修改日期。 Blob接口 File接口继承自Blob接口，Blob接口表示不变的裸数据，其定义代码如下： 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); void close(); }; Blob接口定义了下面2个属性： ? size，返回Blob对象的大小，单位是字节。 ? type，返回Blob对象媒体类型的字符串。 Blob接口定义了下面2个方法： ? slice，返回从start开始到end的contentType类型数据的新的 Blob对象。 ? close，关闭Blob对象。 在JavaScript中操作FileList数组 在JavaScript中，可以使用下面的方法获取File类型的input元素的FileList数组。 document.forms[表单名][File类型的input元素名].files 获取FileList数组中的Fi