HTML< input type ='file'>应用一个过滤器 [英] HTML <input type='file'> apply a filter
问题描述
< input type ='file'name ='userFile'>
现在，当我点击浏览按钮时，浏览对话框将显示所有文件...如果我想过滤文件类型可以说
- 仅限图片或 .png & .jpg & .gifs
- 只有像 .doc & .docx & .pps
如何做到这一点...
文件输入控件上有一个接受属性，您可以在其中指定所需文件的类型。不过，从我所看到的，许多浏览器都喜欢忽略它 - 可以指定的文件类型是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
ul>
您应该考虑添加属性，因此支持它的浏览器可以帮助用户更轻松地找到正确的文件。但是我仍然会建议你在文件被选中后检查文件名，如果上传了错误的扩展名的文件，就会显示错误信息。
当然，绝对有服务器再次检查文件是否是正确的类型。文件扩展名只是一种命名约定，可以很容易地被破坏。即使我们可以信任浏览器（我们不能这样做），即使它试图按照您的要求过滤东西（它可能不会），但它确实验证了的机会。 doc 文件是真正的Word文档，位于nil旁边。
<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
- only images or .png & .jpg & .gifs
- only office file like .doc & .docx & .pps
how to do it...
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).
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 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.
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屋！
