html - 将文件上传选择限制为特定类型

Question

无论如何要通过<input type="file" />元素限制文件类型的选择？

例如，如果我只想上传图像类型，我会将可能的选择限制为 (image/jpg,image/gif,image/png)，并且选择对话框会使其他 mime 类型的文件变灰。

ps 我知道我可以通过扫描 .type 属性来使用 File API 执行此操作。我真的想事先限制这一点。我也知道我可以通过 flash 做到这一点，但我不想为此使用 flash。

Answer 1

有一个用于此特定目的的 html 属性，accept但它几乎不支持跨浏览器。因此，建议改为使用此服务器端验证。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

如果您无法访问后端，请查看基于 Flash 的解决方案，例如SWFUpload。

在此处查看更多信息：文件输入“接受”属性 - 它有用吗？

Answer 2

最好让用户选择任何文件，然后检查其类型 - 浏览器更好地支持这一点：

var
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined),
    supportedFormats = ['image/jpg','image/gif','image/png'];

if (file && file.type) {
    if (0 > supportedFormats.indexOf(file.type)) {
        alert('unsupported format');
    }
    else {
        upload();
    }
}

您还可以使用 file.size 属性检查文件大小。