当前位置：文江博客话题详情

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

发布于 2024-12-06 17:03:51 字数 253 浏览 1 评论 0原文

无论如何要通过元素限制文件类型的选择？

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一直在等你来 2024-12-13 17:03:51

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

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

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

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

There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead.

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

If you don't have access to the backend have a look at a flash based solution like SWFUpload.

See more on this here: File input 'accept' attribute - is it useful?

回复收藏 0 原文

赏烟花じ飞满天 2024-12-13 17:03:51

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

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

It's better to let user select any file, and then check its type - this is better supported by the browsers:

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();
    }
}

You can also check for file size using file.size property.

回复收藏 0 原文

~没有更多了~