16.1  选择一个上传文件

在HTML 5中，可以使用“file”类型的<input>元素实现文件的上传功能。在HTML 5元素中，在该类型的<input>元素中新添加了一个“multiple”属性，如果将属性的值设置为“true”，就可以在一个元素中实现多个文件的上传。另外，通过访问Blob对象，可以获取上传文件的类型和大小属性。

在本实例中，当创建一个“file”类型的<input>元素上传文件时，该元素在页面中的展示方式发生了变化，不再显示一个文本框，而是使用一个“选择文件”的按钮，按钮的右侧显示选择上传文件的名称。当初始化页面时没有上传文件，就会显示“未选择文件”字样。实例文件1.html的具体实现代码如下。

执行上述代码后，如果单击该元素的“选择文件”按钮，可以选择一个图片文件。单击“打开”按钮或双击该文件后，在“选择文件”按钮的右侧，如果显示该图片文件的名称，表明已将该文件选中，正在等待上传。

样式文件css.css的代码如下。

执行效果如图16-1所示。

图16-1 执行效果