Javascript 如何按特定文件类型过滤 input type="file" 对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8938124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to filter input type="file" dialog by specific file type?
提问by Sachin J
I want to restrict the browser to JPG files when I click on browse button of the <input type="file">.
当我单击 .jpg 文件的浏览按钮时，我想将浏览器限制为 JPG 文件<input type="file">。
Is it possible to browse for specific file types?
是否可以浏览特定的文件类型？
采纳答案by JB Nizet
See http://www.w3schools.com/tags/att_input_accept.asp:
见http://www.w3schools.com/tags/att_input_accept.asp：
The accept attribute is supported in all major browsers, except Internet Explorer and Safari. Definition and Usage
The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).
Note: The accept attribute can only be used with
<input type="file">.Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.
Syntax
<input accept="audio/*|video/*|image/*|MIME_type" />Tip: To specify more than one value, separate the values with a comma (e.g.
<input accept="audio/*,video/*,image/*" />.
除了 Internet Explorer 和 Safari 之外，所有主要浏览器都支持 accept 属性。定义和用法
accept 属性指定服务器接受的文件类型（可以通过文件上传提交）。
注意：accept 属性只能与
<input type="file">.提示：不要将此属性用作验证工具。应在服务器上验证文件上传。
句法
<input accept="audio/*|video/*|image/*|MIME_type" />提示：要指定多个值，请用逗号分隔这些值（例如
<input accept="audio/*,video/*,image/*" />.
回答by Vegard
This will give the correct (custom) filter when the file dialog is showing:
当文件对话框显示时，这将提供正确的（自定义）过滤器：
<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">
回答by UserAK47
<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;
}
});
回答by John
You can use the accept attribute along with the . It doesn't work in IE and Safari.
您可以将 accept 属性与 . 它在 IE 和 Safari 中不起作用。
Depending on your project scale and extensibility, you could use Struts. Struts offers two ways to limit the uploaded file type, declaratively and programmatically.
根据您的项目规模和可扩展性，您可以使用 Struts。Struts 提供了两种方式来限制上传的文件类型，声明式和编程式。
For more information: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes
更多信息：http: //struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes
回答by Sebastian
Add a custom attribute to <input type="file" file-accept="jpg gif jpeg png bmp">and read the filenames within javascript that matches the extension provided by the attribute file-accept. This will be kind of bogus, as a text file with any of the above extension will erroneously deteted as image.
将自定义属性添加到<input type="file" file-accept="jpg gif jpeg png bmp">javascript 中并读取与该属性提供的扩展名匹配的文件名file-accept。这将是一种伪造，因为具有上述任何扩展名的文本文件将被错误地检测为图像。
