返回动态
3 分钟阅读

input标签文件选择限制文件类型方法——MIME简介

当我们使用表单组件的时候，经常会使用到文件选择控件： <input type="file" />，有时候我们会忽略掉其一个重要的属性 accept，其代表这个上传控件允许浏览的文件类型，使用这个属性可以大大改善用户选择文件时的体验。

image

accept 属性

根据 MDN 文档，其这样解释accepet属性：

accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的 唯一文件类型说明符 列表。由于给定的文件类型可以用多种方式指定，因此当你需要给定格式的文件时，提供一组完整的类型指定符是非常有用的。

那什么是唯一文件类型说明符呢？唯一文件类型说明符是一个字符串，表示在 file 类型的 <input> 元素中用户可以选择的文件类型。每个唯一文件类型说明符可以采用下列形式之一：

  • 一个以英文句号（”.”）开头的合法的不区分大小写的文件名扩展名。例如： .jpg，.pdf 或 .doc。

  • 一个不带扩展名的 MIME 类型字符串。

  • 字符串 audio/*， 表示“任何音频文件”。

  • 字符串 video/*，表示 “任何视频文件”。

  • 字符串 image/*，表示 “任何图片文件”。

accept 属性的值是一个包含一个或多个（用逗号分隔）这种唯一文件类型说明符的字符串。 例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF 文件，大概是这样的：

<input type="file" accept="image/*,.pdf">

MIME

光只有音频、视频、图片大家可能觉得不够用，我们经常会提交表格或其他文档文件，这个时候就需要使用到上述提到的 MIME 类型字符串了。MIME通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。

其通常结构是这样：type/subtype，由类型与子类型两个字符串中间用’/‘分隔而组成，type 表示可以被分多个子类的独立类别。subtype 表示细分后的每个类型。

例如：

text/plain
text/html
image/jpeg
audio/ogg
audio/*
video/mp4
application/*
application/json
application/javascript
application/ecmascript
application/octet-stream

知道这些，选择文件的时候就好办了，只要知道对应的文件 MIME type 就好了，接下来我列出了基本上你能见到的 MIME type。

提示

需要注意的是，仅标注了 accept 属性是不够的，这样只是提升了用户体验，但是对于文件的类型验证，这一招只防君子不防小人，用户可以轻松绕过类型选择限制。选择文件时点击右下角的类别选择所有文件，照样能选到其他类型。所以文件选中后是要使用正则表达式来验证其文件名合法性的。

image

如果你觉得上述的 MIME 不够用，你还可以使用开源项目mime这个npm库，基本上涵盖了所有文件类型，而且在不断更新。

使用方法：

npm install mime

const mime = require('mime');

mime.getType('txt');                    // ⇨ 'text/plain'
mime.getExtension('text/plain');        // ⇨ 'txt'

评论