1. 犀牛前端部落首页
  2. Html5教程

input accept属性限制只能上传图片

如何在表单中使用上传文件时,限制只能选择图片呢?

input accept属性限制只能上传图片

当然,你可以在服务端进行限制,但是同时拥有一个客户端筛选器对于您的用户来说是一个非常好的用户体验—在向您发送文件并返回错误时不会浪费时间和资源。

您可以通过使用accept属性,并指定您接受的文件的MIME类型来实现这一点。

image/* 可以表示所有图像类型。

<input type="file" name="myImage" accept="image/*" />

如果你希望指定文件类型,可以这样使用:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

关于accept属性的兼容性,可以查阅 https://caniuse.com/#feat=input-file-accept

关于兼容性,在日常开发中,一定要格外注意的。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3342.html

发表评论

登录后才能评论