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实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
source.php查看源文件
2006/12/09 PHP
PHP 采集心得技巧
2009/05/15 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
前端必学之PHP语法基础
2016/01/01 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
传智播客学习之java 反射
2009/11/22 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Python多线程实例教程
2014/09/06 Python
Python中的两个内置模块介绍
2015/04/05 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python reduce()函数的用法小结
2017/11/15 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python flask实现分页的示例代码
2018/08/02 Python
django中使用POST方法获取POST数据
2019/08/20 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
事业单位辞职信范文
2014/01/19 职场文书
打架检讨书500字
2014/01/29 职场文书
销售目标责任书
2014/07/23 职场文书
万能检讨书
2015/01/27 职场文书
导游词之神仙居景区
2019/11/15 职场文书
什么是SOLID
2022/03/24 Javascript