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学习基础知识小结
Nov 25 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php排序算法实例分析
2016/10/17 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
python实现日常记账本小程序
2018/03/10 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
高三自我鉴定范文
2013/10/19 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
乡下人家教学反思
2014/02/01 职场文书
药店主任岗位责任制
2014/02/10 职场文书
师德师风自查材料
2014/10/14 职场文书
湘江北去观后感
2015/06/15 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
python实现A*寻路算法
2021/06/13 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技