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 相关文章推荐
JS方法调用括号的问题探讨
Jan 24 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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入门速成教程
2007/03/19 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Django添加sitemap的方法示例
2018/08/06 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
Python容器类型公共方法总结
2020/08/19 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL