16.5  过滤上传文件的类型

前面已经讲解了与文件上传操作相关的几个实例，读者可试想一下：在选择上传文件后，如果能根据文件返回的类型过滤所选择的文件，则是一种非常实用的方法，但是需要编写不少代码。在HTML 5中，可以设置“file”类型<input>元素的“accept”属性为文件的过滤类型；设置完“accept”属性值后，在打开窗口选择文件时，默认的文件类型就是所设置的过滤类型。

本实例的功能是，将“file”类型的<input>元素通过“accept”属性来过滤选择文件的类型。在具体实现上，首先创建一个“file”类型的<input>元素，并在元素中添加一个“accept”属性，将属性值设置为“image/gif”。当用户单击“选择文件”按钮时，在打开的文件选择窗口中使用“accept”作为默认的文件类型。实例文件5.html的实现代码如下所示。

在上述代码中，因为对文件元素添加了“accept”属性，并将“image/gif”类型作为该属性的值，所以当单击“选择文件”按钮打开窗口时，其默认的选择文件类型就是所设置“accept”属性值。由此可见，通过设置元素的一个属性即可在文件选择前过滤所选文件的类型。虽然这种方法的代码简单，但是在目前的浏览器中不是很有效。原因是即便通过属性设置了文件选择的类型，但不是该类型的文件同样也可以被选中，也能被文件元素所接受。执行后的效果如图16-7所示。

图16-7 执行效果