想要上传图片,只需要为 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 类型,如果不是则不让文件上传。
这样就可以在浏览器和服务器端确保只能上传图片了。