Question

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

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

P.S。我知道我可以通过扫描.type属性在File API之后执行此操作。我真的试图限制这一点..我也知道我可以通过闪存来做到这一点，但我不想为此使用flash。

Answer 1

有一个名为accept的特定用途的html属性，但它对浏览器的支持很少。因此建议使用此服务器端验证。

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

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

在此处详细了解：File input 'accept' attribute - is it useful?

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属性检查文件大小。

将文件上载选择限制为特定类型

2 个答案: