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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
JS回调函数深入理解
2019/10/16 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
pycharm远程调试openstack的图文教程
2017/11/21 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
python跨文件使用全局变量的实现
2020/11/17 Python
python中实现词云图的示例
2020/12/19 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
工程业务员岗位职责
2013/12/31 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
家长会欢迎标语
2014/06/24 职场文书
公司授权委托书范文
2014/08/02 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
公司2015年终工作总结
2015/05/26 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
导游词之西安骊山
2019/12/03 职场文书