使用js正则表达式验证文件扩展名方法实例

 更新时间:2022年11月17日 08:56:23   作者:baby加油_  
文件上传时,为了安全验证,对于手工改动文件后缀名产生的伪造文件进行判断过滤,下面这篇文章主要给大家介绍了关于如何使用js正则表达式验证文件扩展名的相关资料,需要的朋友可以参考下

验证文件是否是图片

function checkSuffix(str){
  var strRegex = /\.(jpg|png|gif|bmp|jpeg)$/; 
  if (strRegex.test(str.toLowerCase())){
    return true;
  } else{
    return false;
  }
}

验证

var f = 'a.mp3'
console.log(checkSuffix(f))

f='a.jpg'
console.log(checkSuffix(f))

公共方法验证文件后缀

/*
* suf 格式为逗号分隔的多个后缀,例如jpg,gif,png
*/
function checkSuffix(str,suf)
{
  var strRegex = "\\"+".(" + suf.split(',').join('|') +")$"
  if (strRegex .test(str.toLowerCase())){
    return true;
  } else{
    return false;
  }
}

验证

console.log(checkSuffix('a.jpg', 'jpg,gif,png'));//true

console.log(checkSuffix('a.jpg1', 'jpg,gif,png'))//false

正则表达式及相关方法

1、定义

  1. var re = new RegExp(“a”); //RegExp对象。参数就是我们想要制定的规则。有一种情况必须用这种方式,下面会提到。
  2. var re = /a/; // 简写方法 推荐使用

2、常用的方法

  • test() - 在字符串中查找符合正则的内容,若查找到返回true,反之返回false
    • 用法:正则.test(字符串)
    • 例子:判断是否是数字
var str = '374829348791';
 var re = /\D/; // \D代表非数字
if( re.test(str) ){ // 返回true,代表在字符串中找到了非数字
	alert('不全是数字');
}else{
	alert('全是数字');
}

replace() - 查找符合正则的字符串,替换成新的字符串。

  • 将正则匹配到的字符串替换成指定字符串
  • 返回新的字符串
var str = 'abcdefgahijklmnaopqarsta'
var newStr = str.replace(/a/g,'1')
console.log(newStr)
  • search - 检索指定子串或者与正则表达式匹配的值,返回的值是数字
    • 返回的是检索到第一个匹配项的索引
    • 与indexOf的差别是,一个必须用正则,一个是普通的字符串,而且indexOf主要用来判断有没有某字符串,是具体查询,而search是模糊查询,查到的时候都返回索引值,查不到的时候都返回-1
  • match - 找到一个或多个正则表达式的匹配
    • 返回的是一个数组
    • 包含的是匹配的项
    • 如果正则中有括号,()叫做分组符,则匹配到的字符串会添加到数组中
//常用的例子:
var ret = 'callBack({a: "yyy",b:"hhh"})';
var reg = /^\w+\(({[\w|\W]+})\)$/;
var mathes = ret.match(reg)
console.log(mathes)

mathes = ["callBack({a: 'yyy',b:'hhh'})",
"{a: 'yyy',b:'hhh'}"]

总结

到此这篇关于使用js正则表达式验证文件扩展名的文章就介绍到这了,更多相关js正则验证文件扩展名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现页面截图3种解决方案

    JavaScript实现页面截图3种解决方案

    网页截图是指将网页上的内容截取下来,并保存为图片的过程,下面这篇文章主要给大家介绍了关于JavaScript实现页面截图的3种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • webpack loader使用的安装配置

    webpack loader使用的安装配置

    这篇文章主要为大家介绍了webpack loader使用的安装配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 微信小程序上传图片并等比列压缩到指定大小的实例代码

    微信小程序上传图片并等比列压缩到指定大小的实例代码

    这篇文章主要介绍了微信小程序 上传图片并等比列压缩到指定大小,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • JavaScript中实现单体模式分享

    JavaScript中实现单体模式分享

    这篇文章主要介绍了JavaScript中实现单体模式分享,单体模式的定义:单体是一个用来划分命名空间并将一批相关方法和属性组织在一起的对象,如果它能够被实例化,那么只能被实例化一次,需要的朋友可以参考下
    2015-01-01
  • webpack开发环境和生产环境的深入理解

    webpack开发环境和生产环境的深入理解

    这篇文章主要介绍了webpack开发环境和生产环境的深入理解,详细的介绍了什么是开发环境和生产环境并配置,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • JavaScript基于DOM操作实现简单的数学运算功能示例

    JavaScript基于DOM操作实现简单的数学运算功能示例

    这篇文章主要介绍了JavaScript基于DOM操作实现简单的数学运算功能,涉及javascript节点操作、元素遍历及数学运算相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • 微信小程序自定义tabbar实现突出样式详解流程

    微信小程序自定义tabbar实现突出样式详解流程

    tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • js之事件冒泡和事件捕获详细介绍

    js之事件冒泡和事件捕获详细介绍

    事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,有需要的朋友可以参考一下
    2013-10-10
  • js判断输入框不能为空格或null值的实现方法

    js判断输入框不能为空格或null值的实现方法

    下面小编就为大家分享一篇js判断输入框不能为空格或null值的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 浅析script标签中的defer与async属性

    浅析script标签中的defer与async属性

    最近在网上看到一个前辈在写script标签的时候,居然同时写了async和defer属性,想着这是什么意思呢?所以决定深入的了解下这其中的学问,以下这篇文章就是个人在学习了之后的一些总结分析,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2016-11-11

最新评论