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 相关文章推荐
javascript不可用的问题探究
Oct 01 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 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的ASP防火墙
2006/10/09 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python操作列表的函数使用代码详解
2017/12/28 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
报社实习生自荐信
2014/01/24 职场文书
物理教学随笔感言
2014/02/22 职场文书
《乞巧》教学反思
2014/02/27 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python