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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
js计数器代码
2006/11/04 Javascript
一种JavaScript的设计模式
2006/11/22 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
EJB的角色和三个对象
2015/12/31 面试题
2014年党员个人剖析材料
2014/10/08 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
学校施工安全责任书
2015/01/29 职场文书
英文产品推荐信
2015/03/27 职场文书
离婚代理词范文
2015/05/23 职场文书
大学生党课感想
2015/08/11 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis