余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

MIME 类型大全,你值得收藏(mime文件类型)

xiyangw 2022-11-24 17:04 13 浏览 0 评论

多用途Internet邮件扩展(MIME)类型 是一种标准化的方式来表示文档的性质和格式。 它在IETF RFC 6838中进行了定义和标准化。互联网号码分配机构(IANA)是负责跟踪所有官方MIME类型的官方机构,您可以在媒体类型页面中找到最新的完整列表。

浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理文档;因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。

MIME 类型大全,你值得收藏(mime文件类型)

语法

通用结构

type/subtype

MIME的组成结构非常简单;由类型与子类型两个字符串中间用 '/'分隔而组成。不允许空格存在。type *表示可以被分多个子类的独立类别。subtype 表示细分后的每个类型。*

MIME类型对大小写不敏感,但是传统写法都是小写。

独立类型

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

独立类型表明了对文件的分类,可以是如下之一:

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

对于text文件类型若没有特定的subtype,就使用 text/plain。类似的,二进制文件没有特定或已知的 subtype,即使用 application/octet-stream。

Multipart 类型

multipart/form-data multipart/byteranges

Multipart 类型表示细分领域的文件类型的种类,经常对应不同的 MIME 类型。这是复合文件的一种表现方式。 multipart/form-data 可用于联系 HTMLForms和 POST方法,此外 multipart/byteranges使用状态码 206 PartialContent来发送整个文件的子集,而HTTP对不能处理的复合文件使用特殊的方式:将信息直接传送给浏览器(这时可能会建立一个“另存为”窗口,但是却不知道如何去显示内联文件。)

重要的MIME类型

  • application/octet-stream 这是应用程序文件的默认值。意思是 未知的应用程序文件 ,浏览器一般不会自动执行或询问执行。浏览器会像对待 设置了HTTP头Content-Disposition值为 attachment 的文件一样来对待这类文件。 在 multipart/form-data类型的应答消息体中, Content-Disposition消息头可以被用在 multipart消息体的子部分中,用来给出其对应字段的相关信息。各个子部分由在 Content-Type中定义的分隔符分隔。用在消息体自身则无实际意义。
  • text/plain 文本文件默认值。即使它意味着未知的文本文件,但浏览器认为是可以直接展示的。 text/plain并不是意味着某种文本数据。如果浏览器想要一个文本文件的明确类型,浏览器并不会考虑他们是否匹配。比如说,如果通过一个表明是下载CSS文件的 <link>链接下载了一个 text/plain 文件。如果提供的信息是text/plain,浏览器并不会认出这是有效的CSS文件。CSS类型需要使用text/css。
  • text/css 在网页中要被解析为CSS的任何CSS文件必须指定MIME为 text/css。通常,服务器不识别以.css为后缀的文件的MIME类型,而是将其以MIME为 text/plain 或 application/octet-stream 来发送给浏览器:在这种情况下,大多数浏览器不识别其为CSS文件,直接忽略掉。特别要注意为CSS文件提供正确的MIME类型。
  • text/html 所有的HTML内容都应该使用这种类型。XHTML的其他MIME类型(如 application/xml+html)现在基本不再使用(HTML5统一了这些格式)。

Note: You still need to use application/xml or application/xhtml+xml if you intend to make use of XML’s strict parsing rules, use [<![CDATA[…]]>] or elements from non?HTML, non?SVG or non?MathML XML namespaces, as text/html’s parsing semantics are subtly incompatible with those of application/xml.

  • JavaScript types 据 MIME 嗅探标准,下面是有效的 JavaScript MIME 类型
  • application/javascript
  • application/ecmascript
  • application/x-ecmascript
  • application/x-javascript
  • text/ecmascript
  • text/javascript
  • text/javascript1.0
  • text/javascript1.1
  • text/javascript1.2
  • text/javascript1.3
  • text/javascript1.4
  • text/javascript1.5
  • text/jscript
  • text/livescript
  • text/x-ecmascript
  • text/x-javascript

所有的 text JavaScript 类型已经被 RFC 4329 废弃。

图片类型

只有一小部分图片类型是被广泛支持的,Web安全的,可随时在Web页面中使用的:

MIME 类型图片类型image/gifGIF 图片 (无损耗压缩方面被PNG所替代)image/jpegJPEG 图片image/pngPNG 图片image/svg+xmlSVG图片 (矢量图)

此处的类型划分有一定的争议,有人认为此处应该增加 WebP( image/webp),但是每个新增的图片类型都会增加代码的数量,这会带来一些新的安全问题,所以浏览器供应商对于添加类型非常小心。

另外的一些图片种类可以在Web文档中找到。比如很多浏览器支持 icon 类型的图标作为 favicons或者类似的图标,并且浏览器在MIME类型中的 image/x-icon 支持ICO图像

尽管 image/vnd.microsoft.icon 在ANA注册, 它仍然不被广泛支持, image/x-icon 被作为替代品使用。

音频与视频类型

HTML并没有明确定义被用于 <audio>和 <video>元素所支持的文件类型,所以在web上使用的只有相对较小的一组类型。文章 Media formats supported by the HTML audio and video elements 解释了可以被使用的解码器或视频文件格式。

在web环境最常用的视频文件的格式,是以下这些这些文件类型:

MIME 类型音频或视频类型audio/wave
audio/wav
audio/x-wav
audio/x-pn-wav音频流媒体文件。一般支持PCM音频编码 (WAVE codec "1") ,其他解码器有限支持(如果有的话)。audio/webmWebM 音频文件格式。Vorbis 和 Opus 是其最常用的解码器。video/webm采用WebM视频文件格式的音视频文件。VP8 和 VP9是其最常用的视频解码器。Vorbis 和 Opus 是其最常用的音频解码器。audio/ogg采用OGG多媒体文件格式的音频文件。 Vorbis 是这个多媒体文件格式最常用的音频解码器。video/ogg采用OGG多媒体文件格式的音视频文件。常用的视频解码器是 Theora;音频解码器为Vorbis 。application/ogg采用OGG多媒体文件格式的音视频文件。常用的视频解码器是 Theora;音频解码器为Vorbis 。application/jsonapplication/json (MIMEtype)
https://en.wikipedia.org/wiki/Media
type#Common_examples
https://www.iana.org/assignments/media-types/application/json

multipart/form-data

multipart/form-data 可用于 HTML表单从浏览器发送信息给服务器。作为多部分文档格式,它由边界线(一个由 '--'开始的字符串)划分出的不同部分组成。每一部分有自己的实体,以及自己的 HTTP 请求头, Content-Disposition和 Content-Type用于文件上传领域,最常用的 ( Content-Length因为边界线作为分隔符而被忽略)。

Content-Type: multipart/form-data; boundary=aBoundaryString(other headers associated with the multipart document as a whole)--aBoundaryStringContent-Disposition: form-data; name="myFile"; filename="img.jpg"Content-Type: image/jpeg(data)--aBoundaryStringContent-Disposition: form-data; name="myField"(data)--aBoundaryString(more subparts)--aBoundaryString--

如下所示的表单:

<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">  <input type="text" name="myTextField">  <input type="checkbox" name="myCheckBox">Check</input>  <input type="file" name="myFile">  <button>Send the file</button></form>

会发送这样的请求:

POST / HTTP/1.1Host: localhost:8000User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-US,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-aliveUpgrade-Insecure-Requests: 1Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498Content-Length: 465-----------------------------8721656041911415653955004498Content-Disposition: form-data; name="myTextField"Test-----------------------------8721656041911415653955004498Content-Disposition: form-data; name="myCheckBox"on-----------------------------8721656041911415653955004498Content-Disposition: form-data; name="myFile"; filename="test.txt"Content-Type: text/plainSimple file.-----------------------------8721656041911415653955004498--

multipart/byteranges

multipart/byteranges 用于把部分的响应报文发送回浏览器。当发送状态码 206 PartialContent 时,这个MIME类型用于指出这个文件由若干部分组成,每一个都有其请求范围。就像其他很多类型 Content-Type使用分隔符来制定分界线。每一个不同的部分都有 Content-Type这样的HTTP头来说明文件的实际类型,以及 Content-Range来说明其范围。

HTTP/1.1 206 Partial ContentAccept-Ranges: bytesContent-Type: multipart/byteranges; boundary=3d6b6a416f9b5Content-Length: 385--3d6b6a416f9b5Content-Type: text/htmlContent-Range: bytes 100-200/1270eta http-equiv="Content-type" content="text/html; charset=utf-8" />    <meta name="vieport" content--3d6b6a416f9b5Content-Type: text/htmlContent-Range: bytes 300-400/1270-color: #f0f0f2;        margin: 0;        padding: 0;        font-family: "Open Sans", "Helvetica--3d6b6a416f9b5--

设置正确的MIME类型的重要性

很多web服务器使用默认的 application/octet-stream 来发送未知类型。出于一些安全原因,对于这些资源浏览器不允许设置一些自定义默认操作,导致用户必须存储到本地以使用。常见的导致服务器配置错误的文件类型如下所示:

  • RAR编码文件。在这种情况,理想状态是,设置真实的编码文件类型;但这通常不可能(可能是服务器所未知的类型或者这个文件包含许多其他的不同的文件类型)。这这种情况服务器将发送 application/x-rar-compressed 作为MIME类型,用户不会将其定义为有用的默认操作。
  • 音频或视频文件。只有正确设置了MIME类型的文件才能被 <video>或`
  • 专有文件类型。是专有文件时需要特别注意。使用 application/octet-stream 作为特殊处理是不被允许的:对于一般的MIME类型浏览器不允许定义默认行为(比如“在Word中打开”)

MIME 嗅探

在缺失 MIME 类型或客户端认为文件设置了错误的 MIME 类型时,浏览器可能会通过查看资源来进行MIME嗅探。每一个浏览器在不同的情况下会执行不同的操作。因为这个操作会有一些安全问题,有的 MIME 类型表示可执行内容而有些是不可执行内容。浏览器可以通过请求头 Content-Type来设置 X-Content-Type-Options以阻止MIME嗅探。

其他传送文件类型的方法

MIME类型不是传达文档类型信息的唯一方式:

  • 有时会使用名称后缀,特别是在Microsoft Windows系统上。并非所有的操作系统都认为这些后缀是有意义的(特别是Linux和Mac OS),并且像外部MIME类型一样,不能保证它们是正确的。
  • 魔术数字。不同类型的文件的语法通过查看结构来允许文件类型推断。例如,每个GIF文件以47 49 46 38十六进制值[GIF89]或89 50 4E 47 [.PNG]的PNG文件开头。 并非所有类型的文件都有幻数,所以这也不是100%可靠的方式。

其他

  • Properly configuring server MIME types
  • Media formats supported by the HTML audio and video elements
  • https://www.iana.org/assignments/media-types/application/json

欢迎关注 “后端老鸟” 公众号,接下来会发一系列的专题文章,包括Java、Python、Linux、SpringBoot、SpringCloud、Dubbo、算法、技术团队的管理等,还有各种脑图和学习资料,NFC技术、搜索技术、爬虫技术、推荐技术、音视频互动直播等,只要有时间我就会整理分享,敬请期待,现成的笔记、脑图和学习资料如果大家有需求也可以公众号留言提前获取。由于本人在所有团队中基本都处于攻坚和探路的角色,搞过的东西多,遇到的坑多,解决的问题也很多,欢迎大家加公众号进群一起交流学习。


相关推荐

Vue的框架(了解)

前端MVC设计模式MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分Model:模型,指数据模型,这个数据一般来自于服务器View:视图,指页面标签内容Controller:控制...

Vue.js实战 第五章练习一

练习要求:在原有表格基础上,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提供一个全选的按钮。实现思路:按照vue数据和dom元素双向绑定的特性,定义allCheckStatus变量...

Vue基础到进阶教程之class和style绑定

关于class和style我们并不陌生,这个在学习css的时候就是家常便饭了,操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们,...

深入Vue 必学高阶组件 HOC「进阶篇」

作者:ssh转发连接:https://mp.weixin.qq.com/s/seKoLSIMtTd1sU4uDrgZCA前言高阶组件这个概念在React中一度非常流行,但是在Vue的社区里讨论...

周末大礼包,23道高质量中级前端面试题。金九银十,建议收藏

这套面试题考察的内容比较常见,涉及到JavaScript、ES6、CSS、Vue、简单算法,浏览器相关知识等。题目列表1.JavaScript的数据类型有哪些2.什么是同源策略3.跨域的方法...

vue3.0-摒弃Object.defineProperty,基于 Proxy 的观察者机制

写在前面:11月16日早上,Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作...

程序员都必掌握的前端教程之VUE基础教程(七)

阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到。本篇文章成哥继续带大家来学习前端VUE教程,今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧!01简介在日常开发中,我...

web前端开之网站搭建框架之vue详解

网站搭建框架之vueVue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双...

vue3.0尝鲜-基于 Proxy 的观察者机制探索

Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作为其观察者机制,取代之前使用...

TypeScript 设计模式之观察者模式

一、模式介绍1.背景介绍在软件系统中经常碰到这类需求:当一个对象的状态发生改变,某些与它相关的对象也要随之做出相应的变化。这是建立一种「对象与对象之间的依赖关系」,一个对象发生改变时将「自动通知其他...

vue面试3

1.单页面应用与多页面应用的去别2.简述一下Sass、Less,且说明区别?他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。变量符不一样,les...

VUE v-bind 数据绑定

动态的绑定一个或多个attribute,也可以是组件的prop。缩写::或者.(当使用.prop修饰符)期望:any(带参数)|Object(不带参数)参数:attrOrP...

vue初学习之自定义选择框实现

v-model简单介绍在使用vue的过程中会经常用到input和textarea这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签...

Vue实现拖拽穿梭框功能四种方式

一、使用原生js实现拖拽打开视频讲解更加详细Vue实现拖拽穿梭框功能的四种方式_哔哩哔哩_bilibili<html><head><meta...

Vue3.x setup 语法糖实现props双向绑定

1.背景为了封装一下Element-Plus的分页插件,需要实现父子组件之间的传值。2.父组件<scriptsetuplang="ts">letqueryPa...

取消回复欢迎 发表评论: