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通过Ajax访问XML数据的小例子
Nov 18 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
javascript倒计时效果实现
Nov 12 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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中iconv函数使用方法
2008/05/24 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
浅谈MySQL中的触发器
2015/05/05 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
简单上手Python中装饰器的使用
2015/07/12 Python
django框架模板语言使用方法详解
2019/07/18 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
上海微创软件面试题
2012/06/14 面试题
十八大感想感言
2014/02/10 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
运动会加油稿50字
2015/07/21 职场文书
护理工作心得体会
2016/01/22 职场文书
五年级作文之成长
2019/09/16 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书