Html 我的输入文件接受：accept="image/gif, image/jpg, image/jpeg, image/png", 允许选择其他扩展名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24347628/
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
My input file with accepts: accept="image/gif, image/jpg, image/jpeg, image/png", is allowing to select other extensions
提问by UserX
I have a form to select images for a gallery, and I want to allow user to select only jpg,gif and png image formats.
我有一个为画廊选择图像的表单，我想允许用户只选择 jpg、gif 和 png 图像格式。
And now, for testing, I change extension of a image to .bmp like "image1.bmp", and when I click in my input file to select a image, this "image1.bmp" is hidden, but If I select "show all files", this "image1.bmp" appears, and I can select this "image1.bmp" and send this image in my form. And Im inserting this image with this format on database.
现在，为了测试，我将图像的扩展名更改为 .bmp，如“image1.bmp”，当我单击输入文件以选择图像时，此“image1.bmp”是隐藏的，但是如果我选择“显示所有文件”，出现这个“image1.bmp”，我可以选择这个“image1.bmp”并以我的形式发送这个图像。我在数据库中插入了这种格式的图像。
This is normal using accept="image/gif, image/jpg, image/jpeg, image/png"??
这是正常使用accept="image/gif, image/jpg, image/jpeg, image/png"??
Because what I wanted is to block all formats that are not gif,jpg or png.
因为我想要的是阻止所有不是 gif、jpg 或 png 的格式。
I have this input file:
我有这个输入文件：
<input type="file" name="img[]" multiple="multiple" accept="image/gif, image/jpg, image/jpeg, image/png" />
回答by Jukka K. Korpela
This is common browser behavior. Browsers that support the acceptattribute use it to create an initialfile filter, but they do not prevent the user from changing or removing the filter and thereby selecting and submitting any file they like. The purpose of the attribute is to help users select files of appropriate types.
这是常见的浏览器行为。支持该accept属性的浏览器使用它来创建初始文件过滤器，但它们不会阻止用户更改或删除过滤器，从而选择和提交他们喜欢的任何文件。该属性的目的是帮助用户选择适当类型的文件。
What browsers shoulddo is less clear. HTML 4.01 saysthat the acceptattribute “specifies a comma-separated list of content types that a server processing this form will handle correctly. User agents may use this information to filter out non-conforming files when prompting a user to select files to be sent to the server”. The reference to server-side processing may be misleading. The attribute affects client-side (browser) behavior only. The intent is to say that the attribute value should be written according to what file type(s) are expectedfrom the user; it is more or less self-evident that the server-side form handler should be written so that it is capable of handling the specified type(s).
浏览器应该做什么还不太清楚。HTML 4.01 说该accept属性“指定了一个以逗号分隔的内容类型列表，处理此表单的服务器将正确处理该列表。当提示用户选择要发送到服务器的文件时，用户代理可能会使用此信息来过滤掉不合格的文件。” 对服务器端处理的引用可能会产生误导。该属性仅影响客户端（浏览器）行为。意图是说应该根据用户期望的文件类型写入属性值；应该编写服务器端表单处理程序以便它能够处理指定的类型，这或多或少是不言而喻的。
HTML5 LCis more verbose. It says that the attribute “may be specified to provide user agents with a hint of what file types will be accepted”. It then describes how it could be used by a browser to provide an adequate user interface. It also says: “User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.” This might be sensible, but browsers do not actually do that. Even if they did, the attribute would not constitute a security measure of any kind (because a user could edit the form, or write a form of his own, or use a browser that ignores the acceptattribute). Its purpose is to protect a normal user from making mistakes, like submitting a file of a type that will be rejected by the server-side handler.
HTML5 LC更加冗长。它说该属性“可以指定为用户代理提供将接受哪些文件类型的提示”。然后描述了浏览器如何使用它来提供适当的用户界面。它还说：“用户代理应该防止用户选择不被这些令牌中的一个（或多个）接受的文件。” 这可能是明智的，但浏览器实际上并没有这样做。即使他们这样做了，该属性也不会构成任何类型的安全措施（因为用户可以编辑表单，或编写自己的表单，或使用忽略该accept属性的浏览器）。其目的是保护普通用户免于犯错误，例如提交将被服务器端处理程序拒绝的类型的文件。
(Browsers interpret the acceptattribute value in rather simple way. They work on filename extensions, so if you name a GIF file, or a plain text file, or a binary program file so that its name ends with .png, they will treat it as a PNG image file, instead of inspecting the content of the file. The .bmp extension is problematic, since it commonly means Windows Bitmap, for which there is no registered MIME type; browsers may treat the nonstandard notation image/bmp as corresponding to .bmp.)
（浏览器以accept相当简单的方式解释属性值。它们处理文件扩展名，因此如果您命名 GIF 文件、纯文本文件或二进制程序文件以使其名称以 .png 结尾，它们会将其视为PNG 图像文件，而不是检查文件的内容。.bmp 扩展名是有问题的，因为它通常表示 Windows 位图，没有注册 MIME 类型；浏览器可能会将非标准符号 image/bmp 视为对应于 . bmp。）
You cannot block sendingof files. What you can do is to deal with files properly server-side, and there you should not of course rely on filename extensions but detect the types from the file content.
您不能阻止发送文件。您可以做的是在服务器端正确处理文件，当然您不应该依赖文件扩展名，而是从文件内容中检测类型。
回答by Guilherme Nascimento
Clearly if you click "show all" can obviously see other files.
很明显，如果你点击“全部显示”，显然可以看到其他文件。
Your question is not quite hide or show, but filter at the time of upload, you have two solutions:
您的问题不是完全隐藏或显示，而是在上传时进行过滤，您有两种解决方案：
1) SERVER-SIDE: With php (just an example) and regExp:
1）服务器端：使用php（只是一个例子）和regExp：
if (preg_match('#^image\/(png|)$#', $_FILES[$i]['img']['type']) === false) {
echo 'Invalid extension!';
} else {
//Save file
}
2) CLIENTE-SIDE: With javascript use determinater lib:
2) 客户端：使用 javascript 使用确定器库：
回答by GAEfan
Changing the extension does not change the mimetype of the file. Do the same test with an actual BMP file.
更改扩展名不会更改文件的 mimetype。用一个实际的 BMP 文件做同样的测试。
回答by David
The accept attribute is not widely accepted. Chrome and IE10+ support it. If you're using anything else, like Firefox, Safari, or Opera, it won't work. You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
accept 属性并未被广泛接受。Chrome 和 IE10+ 支持它。如果您正在使用其他任何东西，例如 Firefox、Safari 或 Opera，它将无法工作。您可以在此处阅读更多信息：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
This means that like Guilherme suggested, you'll need a client side or server side check. I'd suggest both. Client site will immediately tell an unsuspecting user, while the server side will help filter malicious users. However, beware, there is some debate on how MIME type detection isn't exactly reliable. You can Google around if you want to find out more about that.
这意味着就像 Guilherme 建议的那样，您需要进行客户端或服务器端检查。我建议两者。客户端会立即告诉一个毫无戒心的用户，而服务器端会帮助过滤恶意用户。但是，请注意，关于 MIME 类型检测如何不完全可靠存在一些争论。如果你想了解更多信息，你可以谷歌一下。
