有关MIME-TYPE

最新推荐文章于 2023-11-15 17:53:02 发布

摩羯的成长期

最新推荐文章于 2023-11-15 17:53:02 发布

阅读量336

点赞数

分类专栏： front java

本文链接：https://blog.csdn.net/weixin_42603009/article/details/108086984

版权

java 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

front

11 篇文章 0 订阅

订阅专栏

有关图片、音频、视频引出的mime。
现有需求需要是实现图片、音频、视频上传，以及显示预览来组装数据，一切发送给用户。
视频： MP4、webn、3gp

<!-- 视频实现方式-->
1、video标签

音频：3gp、mp3、aac、amv等

<!-- 视频实现方式-->
1、audio标签

图片：jpeg、jpg、png、bmp、gif

1、img标签
``
除了上面的以外，你还有用下面几种方式，不到没有办法的办法不要使用下面的几种方式。

1、embed标签
2、object标签
3、iframe标签

媒体类型官网

文件的分类：

类型	描述	典型示例
text	表明文件是普通文本，理论上是人类可读	text/plain, text/html, text/css, text/javascript

image	表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型	image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon

audio	表明是某种音频文件	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav

video	表明是某种视频文件	video/webm, video/ogg

application	表明是某种二进制数据	application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml,  application/pdf

Multipart 类型表示细分领域的文件类型的种类，经常对应不同的 MIME 类型。这是复合文件的一种表现方式。multipart/form-data 可用于联系 HTML Forms 和 POST 方法
比如：

Content-Type: multipart/form-data; boundary=aBoundaryString
(other headers associated with the multipart document as a whole)

--aBoundaryString
Content-Disposition: form-data; name="myFile"; filename="img.jpg"
Content-Type: image/jpeg

(data)
--aBoundaryString
Content-Disposition: form-data; name="myField"

(data)
--aBoundaryString
(more subparts)
--aBoundaryString--

application/octet-stream这是应用程序文件的默认值。要注意了。如果时你想要的格式变成了这个。
1、文件格式不对一，通常时操作系统上没有相关文件的支持。比如上传excel,去别处拿一个excel文件过来，本机却没安装excel。导致无法解析。
2、文件格式不对二，本地安装的软件改了文件格式。比如你还是去别处拿了一个zip过来，本机上安装由7-zip。那么压缩文件格式变成7-zip的格式。导致了文件类型对不上。

所以啊！环境一致性时很重要的。

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

RAR编码文件。在这种情况，理想状态是，设置真实的编码文件类型；但这通常不可能（可能是服务器所未知的类型或者这个文件包含许多其他的不同的文件类型）。这这种情况服务器将发送
application/x-rar-compressed 作为MIME类型，用户不会将其定义为有用的默认操作。
音频或视频文件。只有正确设置了MIME类型的文件才能被或识别和播放。可参照 use the
correct type for audio and 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％可靠的方式。
所以严格来说，一直流行一种说法利用content-type去校验时靠谱的也是错的。

说说文件上传的事情。上面明显可见无论那种格式说到底都是文件。
所以实际工作中我们为了更好的扩展，完全可以写一个公共上传方法。

具体思路：
1、将所有input为file类型的文件上传根据上面的几大类型放到不同的目录。
2、配置文件key-value说明支撑类型，利用改配置文件生成map。从而减少后期扩展和维护的问题。比如jpg=image/jpeg;put(“jpg”,“image/jpeg”)
3、我们规定所有文件放在跟root目录下00-text、01-image、02-video、03-audio、04-application。当然区分你还可以根据自己的需要细分。上传的时候你根据类型去放，或者根据url带上目录去放。

只给思路，网上上传的一大堆。这里只是做了目录区分：

1、根据上生成临时文件，比如默认30分钟后删除
2、根据临时文件进行校验，文件名、文件大小、压缩包验证等
3、临时文件id在对应目录下不存在则存入。

下载就更简单了get获取往response里面塞就行。

前端处理：

<!DOCTYPE HTML>
<html>
<body>
<!--说明时要要由的，当格式不支持就会出现这句话了-->
<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<!--万不得已用的方法embed、object、iframe-->
<embed src="/i/song.ogg" />

<!--事件的处理-->
<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body>
</html>

摩羯的成长期

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
有关MIME-TYPE

有关图片、音频、视频引出的mime。现有需求需要是实现图片、音频、视频上传，以及显示预览来组装数据，一切发送给用户。视频： MP4、webn、3gp1、video标签音频：3gp、mp3、aac、amv等1、audio标签图片：jpeg、jpg、png、bmp、gif1、img标签``除了上面的以外，你还有用下面几种方式，不到没有办法的办法不要使用下面的几种方式。1、embed标签2、object
复制链接

扫一扫