HTML <input type ='file'>应用过滤器

Question

<input type='file' name='userFile'>

现在当我点击浏览按钮时,浏览对话框将显示所有文件...如果我想过滤文件类型怎么办呢

• 只有图片或.png&.jpg&.gifs
• 只有办公室文件,如.doc和.docx&.pps

怎么做...

Answer 1

我想你正在寻找接受参数.试试这个

<input type="file" accept="image/*" />

Answer 2

文件输入控件上有一个"accept"属性,您可以在其中指定所需的文件类型. 但是,从我所看到的,许多浏览器都喜欢忽略它 - 可以指定的文件类型是MIME类型,因此严格正确的浏览器必须查看每个文件而不管扩展名并查看它是否是图像(如果是的话,它是什么类型).

更新:至少Windows上的每个主要浏览器的某个版本现在至少提供了对该accept属性的一些支持.(甚至IE支持它,从版本10开始.)但是,依赖它仍然有点早,因为IE 8和9仍然不支持它.一般来说支持有点不稳定.

• Chrome似乎得到了全力支持.它使用自己内置的类型列表以及系统的...所以如果任何一个定义类型,Chrome知道要显示哪些文件.
• IE 10可以很好地支持文件扩展名,并且MIME类型也很不错.它似乎只使用系统的MIME类型到扩展的映射,但是......这基本上意味着如果用户计算机上的某些内容没有使用正确的MIME类型注册这些扩展,IE将不会显示这些MIME类型的文件.
• Opera似乎只支持MIME类型 - 扩展实际上禁用了过滤器 - 而文件选择器的UI很糟糕.您必须选择一种类型才能查看该类型的文件.
• Firefox似乎只支持一组有限的类型,并忽略其他类型和扩展.
• 我没有Safari,也不打算下载它.如果有人能记录Safari的支持......对safari的部分支持.http://caniuse.com/#search=accept

您应该考虑添加属性,因此支持它的浏览器可以帮助用户更轻松地找到正确的文件.但我仍然建议您在文件选中后检查文件名,如果上传了错误扩展名的文件,则显示错误消息.

当然,肯定让服务器仔细检查文件是否是正确的类型.文件扩展名只是一个命名约定,很容易被破坏.即使我们可以信任浏览器(我们不能),即使它确实尝试按照你的要求(它可能不是)过滤东西,它实际验证该.doc文件是真正的Word文档的机会是在零旁边.

Answer 3

它应该使用MIME_type:例如

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

这只会接受*.xlsx文件类型...

有关mime类型的列表,请查看以下链接:http:
//www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-问题/

Answer 4

您无法控制可以选择哪些文件,但您可以在选择文件后使用javascript读取文件名.然后,如果文件类型错误,您可以显示警告和/或禁用提交按钮.但是,请记住,您不能依赖扩展来告诉您文件是否真的是正确的类型.它应该只被视为一种方式来帮助那些在发现您不支持该文件类型之前可能浪费时间上传大文件的用户.

这是一些示例代码.它使用jQuery,但你也可以在普通的javascript中做同样的事情.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});