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

当我们指定accept属性为image时,会默认选择浏览图片
当我们指定accept属性为image时,会默认选择浏览图片

accept 属性

根据 MDN 文档,其这样解释accepet属性[1]

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

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

  • 一个以英文句号(".")开头的合法的不区分大小写的文件名扩展名。例如: .jpg,.pdf 或 .doc。
  • 一个不带扩展名的 MIME 类型字符串。
  • 字符串 audio/*, 表示“任何音频文件”。
  • 字符串 video/*,表示 “任何视频文件”。
  • 字符串 image/*,表示 “任何图片文件”。

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

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

MIME

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

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

例如:

1
2
3
4
5
6
7
8
9
10
11
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。

扩展名文档类型MIME 类型
.aacAAC audioaudio/aac
.abwAbiWord 文档application/x-abiword
.arcArchive 文档application/x-freearc
.aviAVI 视频video/x-msvideo
.azwAmazon Kindle 电子书application/vnd.amazon.ebook
.bin二进制文件application/octet-stream
.bmpWindows OS/2 Bitmap Graphicsimage/bmp
.bzBZip 压缩文档application/x-bzip
.bz2BZip2 压缩文档application/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm .htmlHyperText Markup Language (HTML)text/html
.icoIcon formatimage/vnd.microsoft.icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg.jpgJPEG imagesimage/jpeg
.jsJavaScripttext/javascript
.jsonJSON formatapplication/json
.jsonldJSON-LD formatapplication/ld+json
.mid.midiMusical Instrument Digital Interface (MIDI)audio/midi audio/x-midi
.mjsJavaScript moduletext/javascript
.mp3MP3 audioaudio/mpeg
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape 压缩文档application/x-tar
.tif .tiffTagged Image File Format (TIFF)image/tiff
.ttfTrueType Fontfont/ttf
.txtText, (generally ASCII or ISO 8859-n)text/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3)
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP 压缩文档application/zip
.3gpaudio/video containervideo/3gppaudio/3gpp
.3g2audio/video containervideo/3gpp2audio/3gpp2
.7z7-zip 压缩文档application/x-7z-compressed

提示

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

选择所有文件
选择所有文件

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

使用方法:

1
npm install mime
1
2
3
4
const mime = require('mime');

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

  1. MDN input元素