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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python实现决策树分类
2018/08/30 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
如何使用python代码操作git代码
2020/02/29 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
党员干部公开承诺书
2014/03/26 职场文书
赡养老人协议书
2014/04/21 职场文书
快餐公司创业计划书
2014/04/29 职场文书
村创先争优活动总结
2014/08/28 职场文书
北京天坛导游词
2015/02/12 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers