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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
Python机器学习之决策树和随机森林
Jul 15 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
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php遍历目录viewDir函数
2009/12/15 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
python实现代理服务功能实例
2013/11/15 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
生产部主管岗位职责
2014/01/06 职场文书
退休感言
2014/01/28 职场文书
求职简历中自我评价
2014/01/28 职场文书
安全生产标语大全
2014/10/06 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
面试通知邮件
2015/04/20 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫