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的使用与缓存问题的解决方法
Dec 19 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue中轮训器的使用
Jan 27 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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
一个改进的UBB类
2006/10/09 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
基于python 字符编码的理解
2017/09/02 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
数据库方面面试题
2012/04/22 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
大学生未来职业生涯规划书
2014/02/15 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
党支部书记岗位职责
2015/02/15 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
React 高阶组件HOC用法归纳
2021/06/13 Javascript
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS