Question

我有一个表单来为图库选择图像，我想让用户只选择jpg，gif和png图像格式。

现在，为了测试，我将图像的扩展名更改为.bmp，如＃34; image1.bmp＆＃34;，当我在输入文件中单击以选择图像时，此＆＃34; image1。 BMP＆＃34;是隐藏的，但如果我选择＆＃34;显示所有文件＆＃34;，这＆＃34; image1.bmp＆＃34;出现了，我可以选择这个＆＃34; image1.bmp＆＃34;并以我的形式发送此图像。我将这种格式的图像插入数据库。

使用accept="image/gif, image/jpg, image/jpeg, image/png" ??

这是正常的

因为我想要的是阻止所有不是gif，jpg或png的格式。

我有这个输入文件：

<input type="file" name="img[]" multiple="multiple" accept="image/gif, image/jpg, image/jpeg, image/png" />

Answer 1

这是常见的浏览器行为。支持accept属性的浏览器使用它来创建初始文件过滤器，但它们不会阻止用户更改或删除过滤器，从而选择并提交他们喜欢的任何文件。该属性的目的是帮助用户选择适当类型的文件。

应该做什么的浏览器不太清楚。 HTML 4.01 says accept属性“指定以逗号分隔的内容类型列表，处理此表单的服务器将正确处理。当提示用户选择要发送到服务器的文件时，用户代理可以使用此信息过滤掉不合格的文件。对服务器端处理的引用可能会产生误导。该属性仅影响客户端（浏览器）行为。意图是应该根据用户期望的文件类型来编写属性值;或多或少不言自明的是，应该编写服务器端表单处理程序，以便它能够处理指定的类型。

HTML5 LC更详细。它表示可以指定属性“为用户代理提供将接受哪些文件类型的提示”。然后描述了浏览器如何使用它来提供足够的用户界面。它还说：“用户代理应该阻止用户选择一个（或多个）令牌不接受的文件。”这可能是明智的，但浏览器实际上并不这样做。即使他们这样做，该属性也不会构成任何类型的安全措施（因为用户可以编辑表单，或者编写自己的表单，或者使用忽略accept属性的浏览器）。其目的是保护普通用户不犯错误，例如提交将被服务器端处理程序拒绝的类型的文件。

（浏览器以相当简单的方式解释accept属性值。它们用于文件扩展名，因此如果您命名GIF文件，纯文本文件或二进制程序文件，以便其名称以.png，他们会将其视为PNG图像文件，而不是检查文件的内容.bmp扩展名是有问题的，因为它通常意味着Windows Bitmap，没有注册的MIME类型;浏览器可能会对待非标准符号图像/ bmp对应于.bmp。）

您无法阻止发送文件。你可以做的是在服务器端正确处理文件，你当然不应该依赖文件扩展名来检测文件内容中的类型。

Answer 2

显然，如果你点击＆＃34;显示所有＆＃34;显然可以看到其他文件。

你的问题不是很隐蔽或显示，但在上传时过滤，你有两个解决方案：

1）服务器端：用php（只是一个例子）和regExp：

if (preg_match('#^image\/(png|)$#', $_FILES[$i]['img']['type']) === false) {
    echo 'Invalid extension!';
} else {
    //Save file
}

2）CLIENTE-SIDE：使用javascript使用determinater lib：

https://github.com/rnicholus/determinater

Answer 3

更改扩展名不会更改文件的mimetype。使用实际的BMP文件进行相同的测试。

Answer 4

accept属性未被广泛接受。 Chrome和IE10 +支持它。如果你正在使用其他任何东西，比如Firefox，Safari或Opera，它就不会工作。您可以在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

这意味着像Guilherme建议的那样，您需要进行客户端或服务器端检查。我建议两者兼而有之。客户端站点将立即告知不知情的用户，而服务器端将帮助过滤恶意用户。但是，请注意，有关MIME类型检测如何不可靠的争论。如果您想了解更多相关信息，可以使用谷歌。

我的输入文件接受：accept =＆＃34; image / gif，image / jpg，image / jpeg，image / png＆＃34;，允许选择其他扩展名

4 个答案: