16.4  过滤出非图片格式的文件

在前面的实例16-3中，通过“file”对象可以获取每个上传文件的名称、类型、大小，基于此可以过滤上传文件的类型。具体做法是：当选择上传文件后，遍历每一个“file”对象，获取该对象的类型，并将该类型与设置的过滤类型进行匹配；如果不符合则输出“上传文件类型出错”或“拒绝上传”之类的提示，从而实现在选择文件时过滤掉不需要上传的文件。

在本实例的页面表单中，首先创建了一个“file”类型的<input>元素，并设置“multiple”属性为“true”，用于选择多个文件。当单击“选择文件”按钮并选取了需要上传的文件后，如果选取的文件中存在不符合“图片”类型的文件，则在页面中显示此类型文件的总数量和文件名称。实例文件4.html的实现代码如下。

在上述代码中，如果上传文件是图片类型，则“file”对象返回的类型都以“image/”开头，并在后面添加“*”表示所有的图片类型，或添加“gif”表示某种类型图片。所以如果是一个图片文件，该文件返回的类型必定以“image/”字样开头。

JavaScript文件js4.js的主要代码如下所示。

当本实例遍历传回的文件集合时，通过上述代码中的方法match（）检测每个文件返回的类型中是否含有“image/*”字样。如果没有则说明是非图片类型文件，分别将文件总量与文件名称以叠加的形式保存在变量中；然后将变量的内容赋值给ID号为<pTip>的元素；最后，通过该元素显示全部过滤文件的总量与名称表。执行后的效果如图16-6所示。

图16-6 执行效果