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

参考文献：

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

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

推荐阅读：

Vue.js学习笔记——事件监听

用css实现文本溢出 超出部分隐藏显示省略号

JQuery几个mouse事件的区别和用法

QQ聊天插件，鼠标划入划出显示隐藏效果。

jQuery text() html() val()设置内容和attr()设置属性的用法