JS 获取文件后缀,判断文件类型(比如是否为图片格式)


Posted in Javascript onMay 09, 2020

1、获取文件后缀

有时候我们需要通过文件名或者路径,得到该文件的后缀名(扩展名),可以通过如下方式进行截取:

//文件路径
var filePath = "file://upload/3water.png";
//获取最后一个.的位置
var index= filePath.lastIndexOf(".");
//获取后缀
var ext = filePath.substr(index+1);
//输出结果
console.log(ext);

效果图如下:

JS 获取文件后缀,判断文件类型(比如是否为图片格式)

2、文件类型判断

我们得到文件后缀名后,根据后缀即可判断文件的类型(文件格式)。比如我们需要判断一个文件是否是图片格式,首先定义一个判断函数:

function isAssetTypeAnImage(ext) {
 return [
 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
 indexOf(ext.toLowerCase()) !== -1;
}

使用时只需把后缀传入即可判断:

//文件路径
var filePath = "file://upload/3water.png";
//获取最后一个.的位置
var index= filePath.lastIndexOf(".");
//获取后缀
var ext = filePath.substr(index+1);
//判断是否是图片
console.log("该文件是否为图片:" + isAssetTypeAnImage(ext));

效果图如下:

JS 获取文件后缀,判断文件类型(比如是否为图片格式)

3、第三种实现方式,今天三水点靠木小编刚get到的新技能

<script>
//文件路径
var fileName = "file://upload/3water.png";
var Ttype="";
//后缀获取
let suffix = '';
// 获取类型结果
let result = '';
const flieArr = fileName.split('.');
suffix = flieArr[flieArr.length - 1];
if(suffix!=""){
suffix = suffix.toLocaleLowerCase();
// 图片格式
const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
// 进行图片匹配
result = imglist.find(item => item === suffix);
if (result) {
  Ttype='image';
}
}
console.log("该文件是否为图片:" + Ttype);
</script>

使用es6的箭头函数

Javascript 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
js根据后缀判断文件文件类型的代码
May 09 #Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 #Javascript
JS原形与原型链深入详解
May 09 #Javascript
JavaScript中的this妙用实例分析
May 09 #Javascript
JavaScript中继承原理与用法实例入门
May 09 #Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
JavaScript进阶(四)原型与原型链用法实例分析
May 09 #Javascript
You might like
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php中的动态调用实例分析
2015/01/07 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python 提取文件指定列的方法示例
2019/08/07 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
python logging模块的使用详解
2020/10/23 Python
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
傲盾软件面试题
2015/08/17 面试题
小学英语教师先进事迹
2014/05/28 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2014年减负工作总结
2014/12/10 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
员工自我工作评价
2015/03/06 职场文书
家长会感言
2015/08/01 职场文书
六年级语文教学反思
2016/03/03 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android