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完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
原生js+ajax分页组件
Jan 30 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP安全防范技巧分享
2011/11/03 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
取得传值的函数
2006/10/27 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
全面理解Python中self的用法
2016/06/04 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
测试工程师职业规划书
2014/02/06 职场文书
小学运动会演讲稿
2014/08/25 职场文书
师德师风个人整改措施
2014/10/27 职场文书
奖学金感谢信
2015/01/21 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
python区块链实现简版工作量证明
2022/05/25 Python