w3h5

常见文件的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 文件类型了:

常见文件的mine type类型及获取方法 经验总结 第1张

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

<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类型及获取方法 经验总结 第2张

常见的 mine type 文件类型:

MIME typeFile extensions
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

参考文献:

笔记:使用 JavaScript 识别文件 MIME TYPE 类型

笔记:使用 JavaScript 识别文件 MIME TYPE 类型 - 后续问题和值得记录


赞 (0)
分享到: +More |

评论 沙发

换个身份