如何按特定文件类型过滤输入类型 =“文件”对话框？答案

【问题标题】：How to filter input type="file" dialog by specific file type?如何按特定文件类型过滤输入类型 =“文件”对话框？
【发布时间】：2012-02-14 19:47:20
【问题描述】：

当我点击<input type="file">的浏览按钮时，我想将浏览器限制为JPG文件。

是否可以浏览特定的文件类型？

【问题讨论】：

什么样的上传按钮？ HTML 文件输入？闪光？还有什么？
你的文件在哪里？在你的本地机器上还是在网络上？
可能的答案：stackoverflow.com/questions/181214/…
stackoverflow.com/questions/181214/…
它是一个 Jsp 页面，我正在使用 multipartrequest 上传文件

标签： javascript html

【解决方案1】：

这将在文件对话框显示时提供正确的（自定义）过滤器：

<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">

【讨论】：

@jpoppe 这是一个小错字。如果您愿意，您实际上可以编辑答案并修复它。 :)
@jpoppe，感谢您指出这一点，现已更正：)
哈！不知道您实际上可以指定扩展名。我只是虽然它必须是哑剧类型。但请注意：caniuse.com/#feat=input-file-accept，特别是注释编号 1

【解决方案2】：

见http://www.w3schools.com/tags/att_input_accept.asp:

所有主流浏览器都支持accept属性，除了 Internet Explorer 和 Safari。定义和用法

accept 属性指定服务器接收的文件类型接受（可以通过文件上传提交）。

注意：accept 属性只能与<input type="file"> 一起使用。

提示：不要将此属性用作验证工具。文件上传应该在服务器上进行验证。

语法<input accept="audio/*|video/*|image/*|MIME_type" />

提示：要指定多个值，请用逗号分隔值（例如<input accept="audio/*,video/*,image/*" />。

【讨论】：

谢谢.. 但是如何为 IE 修复它？？
你不修复它。那是你无法控制的事情。只需在 UI 中明确说明用户应该选择的是图像，并在服务器端对其进行验证。这就是“文件上传应该在服务器上验证”的意思。
这使得 mp4 在 Safari 中无法选择。您还需要指定video/mp4。
FWIW IE 11 确实尊重此属性
而 MS Edge 不尊重它connect.microsoft.com/IE/feedback/details/1937551

【解决方案3】：

<asp:FileUpload ID="FileUploadExcel" ClientIDMode="Static" runat="server" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" Text="Upload Excel File" />

.

$('#btnUpload').click(function () {
    var uploadpath = $('#FileUploadExcel').val();
    var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length);

    if ($('#FileUploadExcel').val().length == 0) {
        // write error message
        return false;
    }

    if (fileExtension == "xls" || fileExtension == "xlsx") {
        //write code for success
    }
    else {
        //error code - select only excel files
        return false;
    }

});

【讨论】：

@slavoo ~ 肯定要使用 ASP 输入，OP 需要运行 ASP？为什么在您的编辑中添加？ UserAK47 的回答不需要他们。
@pebbl 打开这篇文章的修订版并在修订版 2 上切换到 side-by-side markdown，你可以看到在我编辑之前 asp 输入在这里，但不可见，因为它已经从代码格式化中消失了.我只修复格式。
@slavoo ~ 啊，这是有道理的......否则我会虽然你有点奇怪:) 澄清。
@pebbl 此 jquery 代码将与 ASP 控件一起允许仅过滤要上传的特定类型的文件

【解决方案4】：

您可以将 accept 属性与 .它在 IE 和 Safari 中不起作用。

根据您的项目规模和可扩展性，您可以使用 Struts。 Struts 提供了两种方式来限制上传的文件类型，声明方式和编程方式。

【讨论】：

【解决方案5】：

向<input type="file" file-accept="jpg gif jpeg png bmp"> 添加一个自定义属性，并在javascript 中读取与file-accept 属性提供的扩展名相匹配的文件名。这将是一种伪造，因为具有上述任何扩展名的文本文件都会被错误地检测为图像。

【讨论】：