如何获得 html5 文件输入以在浏览器中一致地接受某些文件类型？
Posted
技术标签:
【中文标题】如何获得 html5 文件输入以在浏览器中一致地接受某些文件类型？【英文标题】：How do I get a html5 file input to accept only certain file types consistently across browsers? 【发布时间】：2016-02-26 06:03:57 【问题描述】：根据this answer on Stack Overflow，我们可以设置<input type="file" />的accept属性来过滤接受的输入，如下：
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
但是，正如您在下面运行简单的 sn-p 所看到的那样，Chrome 43.0.something 似乎完全忽略此配置，而 Firefox 39.0。
我考虑改用更直接的方法，使用：
accept=".xls, .xlsx"
...在 Chrome 中运行良好，但让 Firefox 有点困惑，只接受使用 .xlsx 扩展名的文件。
考虑到这可能是非常常见和基本的，我一定遗漏了一些东西：我在哪里搞砸了？ 如何获取 html5 文件输入以在浏览器中一致地仅建议 .xls 和 .xlsx 文件？
这是一个说明我的问题的代码 sn-p（以及 JSFiddle link，以防你想摆弄它）。
Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>【问题讨论】：
看起来大多数主流浏览器现在都正确实现了这个功能。我在 Chrome 36、Firefox 42 和 Internet Explorer 11 中测试了您的两个按钮，它们都可以正常工作。查看 here 了解更多信息。 嗯，我想我应该提到我使用的是 Linux 系统（带有 Ubuntu）。虽然，我的客户还提到 Firefox 确实在 Windows 10 环境中使用最新的 FF 过滤掉两个版本中的.xls 文件（虽然在 Chrome 上没有数据）。跨度>
我在 Win 7 和 Vista 上进行了测试。不幸的是，我的 Win 10 盒子只有 IE11 和 Edge（还不想把其他人放在上面）。有趣的是，过滤器似乎在 Edge 中不起作用，尽管 caniuse 页面上说了什么。但是，无论操作系统如何，它们在 IE11 中都可以正常工作。我确实注意到第一个按钮似乎只有在注册 MIME 类型时才有效。
两者都适用于我，Windows 7、Firefox 42 和 44。
您对这篇文章有一个很好而详细的答案：html-input-file-accept-attribute-file-type +1 如果有帮助^^
【参考方案1】：
首先：你确定有 html5 文档类型吗？
<!DOCTYPE html>
因为如果你没有，它可能在某些地方不起作用。
第二：你可以使用 javascript 或 jquery，而不是使用 html。看到这个问题/答案：jquery - Check for file extension before uploading
第三：根据我的经验，某些 html5 的东西有时无法正常工作。我不知道为什么，但有必要通过使用 jquery 来解决问题。
无论如何，您都应该始终进行服务器端验证，以确保用户上传的内容实际上是您限制的内容。
【讨论】：
我不同意您所说的任何内容，但不幸的是，没有提供与accept 属性相同功能的jquery 解决方案。希望大多数开发人员意识到accept 实际上并不应该限制用户可以选择的文件。它是应该做的是通过将可选过滤器应用于文件选择器界面，使用户更容易找到指定类型的文件。
@DoctorDestructo BTW 使用 jQuery 来构建它 Extenibillity 有一个非常好的插件，可以完全按照您的要求进行操作：blueimp.github.io/jQuery-File-Upload 我所做的只是谷歌“jQuery 文件上传插件”并得到了它.我已经完全按照您的要求使用它了。
@MartinBarker 您的 jQuery 小部件不会像 accept 属性那样做（即，在文件选择器对话框中添加文件类型过滤器）。它确实会阻止未批准的文件类型在被选中后，这也是一件好事，但并不能真正替代accept's 功能。
看来我需要更正我的第一条评论。根据the spec，“用户代理应该阻止用户选择不被接受的文件......”所以，这就是accept supposed 的工作方式，但没有浏览器实际实现它大大地。在我测试过的每一个中，用户都可以禁用过滤器，或者只输入文件名来选择他们想要的任何类型的文件。【参考方案2】：
同时传输 MIME 类型和扩展名
<input type="file" name="file2" accept="text/csv, .csv"/>
【讨论】：
不错的答案。 accept="text/csv, .csv" 也兼容 windows chrome 浏览器【参考方案3】：免责声明：无论如何，这不是答案，而只是给试图在走错路了。
在accept 属性的this non-official W3C reference 上，您可以找到以下内容：
提示：不要将此属性用作验证工具。文件上传应在服务器上进行验证。
不推荐使用此属性进行验证，因为用户可以通过某种方式解决它，并且并非所有浏览器的行为都相同。
【讨论】：
这不是答案。 为什么不呢？他要求验证文件的解决方案 问题中没有提及任何验证，这清楚地表明我正在寻找一种方法来始终如一地建议文件它们的类型或扩展名，在文件系统浏览窗口中。 正如我在回答中所说，不建议使用 Html 文件选择器来“过滤”、“建议”文件或其他任何内容。您要寻找的是“验证”，只有具有显式扩展的文件才能通过我在回答中尝试提到的逻辑 @MartinGodzina 您的 W3C 报价说File uploads should be validated on the server. 您的代码在客户端上运行。此外，对于真正的文件验证，您需要查看的不仅仅是扩展名，这实际上只是名称的一部分。【参考方案4】：
删除空格
accept=".xls, .xlsx"
到
accept=".xls,.xlsx"
适用于 Chrome 69 和 Firefox 61。尚未在 Safari、IE 和 Edge 上进行测试。
【讨论】：
以上是关于如何获得 html5 文件输入以在浏览器中一致地接受某些文件类型？的主要内容，如果未能解决你的问题，请参考以下文章
如何优化 mp4 视频以在浏览器中尽可能流畅地播放 (HTML5)
HTML5 视频播放器显示以在浏览器中启用 Flash。如何在不启用 Flash 的情况下播放流视频？