16.2  选择多个上传文件

16.2 选择多个上传文件

在HTML 5中，除了可以选择单个文件外，还可以使用元素的“multiple”属性将该属性值设为“true”，这样可以实现选择多个文件的功能。一个文件对应一个“fde”对象，该对象中有如下两个重要的属性：

■name：表示不包含路径的文件名称。

■lastModifiedDate：表示文件最后修改的时间。

当使用“file”类型的<input>元素选择多个文件时，该元素中就含有多个“file”对象，从而形成了“FileList”对象（即“file”对象）的列表。

在本实例的实现页面中，首先创建一个“file”类型的<input>元素，然后为其添加了“multiple”属性，并将该属性的值设置为“true”。实例文件2.html的实现代码如下。

在上述代码中，因为“file”类型的<input>元素中添加了“multiple”属性，所以可以通过该元素选择多个文件。选择成功后，“选择文件”按钮右侧不再显示文件的名称，而是显示成功选择文件的总量；当将鼠标移至总量时，显示全部上传文件的详细列表。当多个文件被选中时，在上传文件元素中，将会产生一个“FileList”对象，用来装载各文件的基本信息，如文件名称、类型、大小等，在上传文件总量的文字上移动鼠标时，将调用该对象的列表信息并展示在页面中。

当单击“选择文件”时，可以同时选择3个文件。如图16-2所示。

图16-2 同时选择3个文件

单击“打开”按钮后，在“选择文件”按钮的右侧将显示“3个文件”的字样。移动鼠标至文字上时，显示这3个文件的详细名称与类型。如图16-3所示。

图16-3 列出了选择的3个文件