html5 判断文件类型,常见文件的mine type类型及获取方法

前面提到Kangle 服务器添加 mine type 文件类型，但是网上给出的文件类型难免没有那我全面，往往我们正需要的网上却没有。

下面介绍一个简单的 mine type 文件类型的获取方式 ，利用 JS 获取文件的类型：

首先我们写一个 input 的文件上传按钮，HTML：

然后利用 JS 获取到该按钮，监听他的 onchange 事件，打印出文件的 mine type 文件类型：

var input = document.getElementById("input")

input.onchange = (e) => {

console.log(`File type is "${e.target.files[0].type}"`);

}

这样就能在控制台打印出所选文件的 mine type 文件类型了：

为了更直观的表现，可以直接打印在前台页面，下面是优化全部代码：

File type is ：

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+'"';

}

效果如下：

常见的 mine type 文件类型：

MIME typeFile extensionsapplication/vnd.openxmlformats-officedocument.wordprocessingml.documentdocx

application/msworddoc

application/pdfpdf

application/rtfrtf

application/vnd.ms-excelxls

application/vnd.ms-powerpointppt

application/x-rar-compressedrar

application/x-shockwave-flashswf

application/zipzip

audio/midimid midi kar

audio/mpegmp3

audio/oggogg

audio/x-m4am4a

audio/x-realaudiora

image/gifgif

image/jpegjpeg jpg

image/pngpng

image/tifftif tiff

image/vnd.wap.wbmpwbmp

image/x-iconico

image/x-jngjng

image/x-ms-bmpbmp

image/svg+xmlsvg svgz

image/webpwebp

text/csscss

text/htmlhtml htm shtml

text/plaintxt

text/xmlxml

video/3gpp3gpp 3gp

video/mp4mp4

video/mpegmpeg mpg

video/quicktimemov

video/webmwebm

video/x-flvflv

video/x-m4vm4v

video/x-ms-wmvwmv

video/x-msvideoavi

参考文献：