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 相关文章推荐
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
jquery实现图片轮播器
May 23 jQuery
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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数据访问之增删改查操作
2016/05/09 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python的常见命令注入威胁
2013/02/18 Python
一个超级简单的python web程序
2014/09/11 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python下10个简单实例代码
2017/11/15 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
工程招投标邀请书
2014/01/26 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers