Skip to content

Latest commit

 

History

History
57 lines (36 loc) · 1.48 KB

确保输入字段只能上传图片.md

File metadata and controls

57 lines (36 loc) · 1.48 KB

确保输入字段只能上传图片

想要上传图片,只需要为 input 添加 type="file" 字段:

<input type="file" />

我只希望图片被允许由浏览器上传。

这是一件很常见的事情,但是我总是忘记怎么做,我需要把这些记录下来。

使用 accept 属性和传递 image/* 允许所有图片:

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

或者 image/png 只接受 PNG 格式的图片:

<input type="file" accept="image/png" />

同样的语法也可以仅接受视频:

<input type="file" accept="video/*" />

或音频:

<input type="file" accept="audio/*" />

或它们的组合:

<input type="file" accept="image/*,audio/*,video/*" />

添加 multiple 以允许上传多个:

<input type="file" multiple accept="image/*" />

当然这只是客户端验证,你还可以在服务器收到文件时,验证文件的 MIME 类型来确保只能上传图片。

你也可以在文件上传之前获取文件的 MIME 类型,比对是否是图片的 MIME 类型,如果不是则不让文件上传。

这样就可以在浏览器和服务器端确保只能上传图片了。

更多资料

过滤文件输入的文件类型