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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
javascript self对象使用详解
Oct 18 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
浅析node.js的模块加载机制
May 25 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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开发GUI
2006/10/09 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
js表头排序实现方法
2015/01/16 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
python多进程共享变量
2016/04/06 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python 串口通信的实现
2020/09/29 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
上班看电影检讨书
2014/02/12 职场文书
项目投资意向书
2014/04/01 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
财务管理制度范本
2015/08/04 职场文书
python基础之while循环语句的使用
2021/04/20 Python
python cv2图像质量压缩的算法示例
2021/06/04 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android