常见文件的mine type类型及获取方法
前面提到Kangle 服务器添加 mine type 文件类型，但是网上给出的文件类型难免没有那我全面，往往我们正需要的网上却没有。
下面介绍一个简单的 mine type 文件类型的获取方式 ，利用 JS 获取文件的类型：
首先我们写一个 input 的文件上传按钮，HTML：
<input type="file" id="input">然后利用 JS 获取到该按钮，监听他的 onchange 事件，打印出文件的 mine type 文件类型：
<script>
var input = document.getElementById("input")
input.onchange = (e) => {
console.log(`File type is "${e.target.files[0].type}"`);
}
</script>这样就能在控制台打印出所选文件的 mine type 文件类型了：
为了更直观的表现，可以直接打印在前台页面，下面是优化全部代码：
<input type="file" id="input">
<div>File type is ：<span id="mineType" style="color: red"></span></div>
<script>
var input = document.getElementById("input")
var mineType = document.getElementById("mineType")
input.onchange = (e) => {
console.log(`File type is "${e.target.files[0].type}"`);
mineType.innerHTML = '"'+e.target.files[0].type+'"';
}
</script>效果如下：
常见的 mine type 文件类型：
MIME type | File extensions |
|---|---|
application/vnd.openxmlformats-officedocument.wordprocessingml.document | docx |
application/msword | doc |
application/pdf | |
application/rtf | rtf |
application/vnd.ms-excel | xls |
application/vnd.ms-powerpoint | ppt |
application/x-rar-compressed | rar |
application/x-shockwave-flash | swf |
application/zip | zip |
audio/midi | mid midi kar |
audio/mpeg | mp3 |
audio/ogg | ogg |
audio/x-m4a | m4a |
audio/x-realaudio | ra |
image/gif | gif |
image/jpeg | jpeg jpg |
image/png | png |
image/tiff | tif tiff |
image/vnd.wap.wbmp | wbmp |
image/x-icon | ico |
image/x-jng | jng |
image/x-ms-bmp | bmp |
image/svg+xml | svg svgz |
image/webp | webp |
text/css | css |
text/html | html htm shtml |
text/plain | txt |
text/xml | xml |
video/3gpp | 3gpp 3gp |
video/mp4 | mp4 |
video/mpeg | mpeg mpg |
video/quicktime | mov |
video/webm | webm |
video/x-flv | flv |
video/x-m4v | m4v |
video/x-ms-wmv | wmv |
video/x-msvideo | avi |
参考文献：
笔记：使用 JavaScript 识别文件 MIME TYPE 类型
笔记：使用 JavaScript 识别文件 MIME TYPE 类型 - 后续问题和值得记录
声明：本文由w3h5原创，转载请注明出处：《常见文件的mine type类型及获取方法》 https://cloud.tencent.com/developer/article/1538457