HTML <input type='file'>应用过滤器 [英] HTML <input type='file'> apply a filter

问题描述

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

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

now when i will click the browse button, the browse dialog will show all files... what if i want to filter file types lets say

• 仅图像或 .png &.jpg &.gifs
• 只有像 .doc 这样的办公文件 &.docx &.pps

• only images or .png & .jpg & .gifs
• only office file like .doc & .docx & .pps

怎么做...

推荐答案

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

There is an "accept" attribute on file input controls, where you can specify the types of files you want. From what i'm seeing, though, many browsers like to ignore it -- the file types that can be specified are MIME types, so a strictly correct browser would have to look at every file regardless of extension and see if it's an image (and if so, what type it is).

更新:现在似乎 Windows 上每个主要浏览器的某些版本至少提供了对 accept 属性的一些支持.(即使 IE 支持它，从版本 10 开始.)但是，现在依赖它还为时过早，因为 IE 8 和 9 仍然不支持它.总体上的支持有点参差不齐.

Update: It seems at least some version of every major browser on Windows now provides at least some support for the accept attribute. (Even IE supports it, as of version 10.) However, it's still a bit early yet to rely on it, as IE 8 and 9 still don't support it. And support in general is a bit spotty.

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

• Chrome seems to have full support. It uses its own built-in list of types as well as the system's...so if either one defines the type, Chrome knows which files to show.
• IE 10 supports file extensions beautifully, and MIME types decently. It seems to use only the system's mapping of MIME type to extensions, though...which basically means if something on the user's computer didn't register those extensions with the right MIME types, IE won't show files of those MIME types.
• Opera only seems to support MIME types -- to the point where extensions actually disable the filter -- and the UI for the file selector sucks. You have to select a type in order to see the files of that type.
• Firefox appears to support only a limited set of types, and ignore other types as well as extensions.
• I don't have Safari, and don't plan on downloading it. If someone could document Safari's support... Partial support on safari. http://caniuse.com/#search=accept

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

You should consider adding the attribute, so browsers that support it can help the user find the right files more easily. But i would still suggest that you check the filename after the file's selected and show an error message if a file with the wrong extension is uploaded.

当然，一定要让服务器仔细检查文件的类型是否正确.文件扩展名只是一种命名约定，很容易被颠覆.即使我们可以信任浏览器(我们不能)，即使它确实尝试按照您的要求过滤内容(可能不会)，它也有机会实际验证 .doc 文件是真正的 Word 文档，几乎为零.

And of course, definitely have the server double-check that the file is the right type. File extensions are just a naming convention, and can be easily subverted. And even if we could trust the browser (which we can't), and even if it did attempt to filter stuff as you asked (which it might not), the chance of it actually verifying that that .doc file is truly a Word document is next to nil.

这篇关于HTML <input type='file'>应用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！