js 图片类型mage/jpeg， image/bmp， image/gif ，image/png

2023-08-10 06:02| 来源: 网络整理| 查看: 265

cplvfx作者推荐代码 //判断图片类型是否支持上传，支持true,不支持false function Chacktypefun(name) {return /\.(gif|jpg|jpeg|png)$/i.test(name)} var Name1="微信图片_20220331110240.jpg" Chacktypefun(Name1) //返回true

test() 方法用于检测一个字符串是否匹配某个模式.

/\.(gif|jpg|jpeg|png)$/i 这段代码是正则表达式，其中的“i”解释如下

修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符描述i执行对大小写不敏感的匹配。g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。m执行多行匹配。

var imgType=['gif','jpeg','jpg','png'] var imgfileType=['image/gif','image/jpeg','image/jpg','image/pjpeg','image/x-png','image/png']

上传图片时: ie会把 jpg、jpeg翻译成image/pjpeg，png翻译成image/x-png。而火狐则很标准：jpg、jpeg翻译成image/jpeg，png翻译成image/png。

测试结果如下：

firefox ：image/jpeg， image/bmp， image/gif ，image/png

ie 6 ：image/pjpeg ，image/bmp， image/gif ，image/x-png

ie 7： image/pjpeg ，image/bmp， image/gif， image/x-png

ie 8： image/pjpeg， image/bmp ，image/gif， image/x-png

以上内容参考：上传type中jpg是image/jpeg还是image/pjpeg_百度知道

js判断上传图片格式类型、尺寸大小

转载：js判断上传图片格式类型、尺寸大小_王一一的博客的博客-CSDN博客_js判断图片格式

//判断图片类型 var f=document.getElementById("File1").value; if(f==" "){ alert("请上传图片"); return false; }else{ if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") return false; } }

小图中图大图

js实现上传图片类型+大小+尺寸验证

Note：

1、每一个验证可以单独拆开去。只需要花费一点点功夫处理传参，返回

2、verificationPicType类型验证函数和 verificationPicSpace大小验证函数是实时的。直接可以用函数的返回值做判断，处理之后业务逻辑。

3、但是verificationPicSize尺寸验证函数的返回不能直接用。因为内部图片加载是异步的，函数的返回值不是基于图片尺寸大小判断的结果。只能利用错误提示。根本原因是内部使用FileReader对象。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

参考连接：FileReader

好了，直接上代码

//图片验证（大小，尺寸，类型） function verifyImageInfo(that,allow_type_arr,allow_space,allow_size_obj){ if(verificationPicType(that,allow_type_arr) && verificationPicSpace(that,allow_space)){ //尺寸验证不能在判断条件。 //因为内部图片加载是异步的，函数的返回值不是基于图片尺寸大小判断的结果。只能利用错误提示 verificationPicSize(that,allow_size_obj); return true; } return false; } /** * 图片类型验证 * @allow_type_arr ['jpg','png'],如果数组为空则表示不限 */ function verificationPicType(that,allow_type_arr) { if(allow_type_arr.length==0) return true; var fileTypes = allow_type_arr; var filePath = that.value; //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false if(filePath){ var isNext = false; var fileEnd = filePath.substring(filePath.indexOf(".")+1).toLowerCase(); // console.log(fileEnd); for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { isNext = true; break; } } if (!isNext){ alert('不接受此文件类型'); that.value = ""; return false; } return true; }else { return false; } } /** * 图片大小验证 * @allow_space 400,如果值为0则表示不限 */ function verificationPicSpace(that,allow_space) { if(allow_space==0) return true; var fileSize = 0; var fileMaxSize = allow_space; var filePath = that.value; if(filePath){ fileSize =that.files[0].size; var size = fileSize / 1024;//单位b转换kb // console.log(size); if (size > fileMaxSize) { alert("文件大小超出限制！"); that.value = ""; return false; }else if (size

【本文地址】

公司简介

联系我们