MIME类型：从限定选择文件类型看MIME类型前后端设置

原创

周陆军博客

发布于 2023-05-07 09:45:59

1.2K00

代码可运行

文章被收录于专栏：前端博客前端博客

运行总次数：0

代码可运行

在前端开发时候，我们让用户上传文件，但是，怎么去限制用户选择文件的类型？

比如，我只让用户选择图片上传！

当然，选择其它文件后，让用户判断是否是图片……

但是，我选择的时候，就限制用户的选择范围，……可以如此！

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

这样，就只能选择 gif,jpg,png格式的图片了

其实，就是给input指定媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型）

媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型）是一种标准，用来表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化。互联网号码分配机构（IANA）是负责跟踪所有官方MIME类型的官方机构，您可以在媒体类型页面中找到最新的完整列表。 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

下面是个人增补的表格：

类型	描述	典型示例
text	表明文件是普通文本，理论上是人类可读	text/plain, text/html, text/css, text/javascript,application/json
image	表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型	image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon,image/tiff
audio	表明是某种音频文件	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
video	表明是某种视频文件	video/webm, video/ogg,video/x-mpeg2,video/quicktime,video/x-msvideo
application	表明是某种二进制数据	application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf