js 图片类型mage/jpeg， image/bmp， image/gif ，image/png-程序员宅基地

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判断上传图片格式类型、尺寸大小_王一一的博客的博客-程序员宅基地_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;
	}
}

function CheckFile(f,p){
	//判断图片尺寸
	var img=null;
	img=document.createElement("img");
	document.body.insertAdjacentElement("beforeend",img);
	img.style.visibility="hidden"; 
	img.src=f;
	var imgwidth=img.offsetWidth;
	var imgheight=img.offsetHeight;
	if(p.name=="UpFile_Photo1"){
		if(imgwidth!=68||imgheight!=68){
			alert("小图的尺寸应该是68x68");
		}
	}
	if(p.name=="UpFile_Photo2"){
		if(imgwidth!=257||imgheight!=351){
			alert("中图的尺寸应该是257x351");
		}
	}
	if(p.name=="UpFile_Photo3"){
		if(imgwidth!=800||imgheight!=800){
			alert("大图的尺寸应该是800x800");
		}
	}
	//判断图片类型
	if(!/\.(gif|jpg|jpeg|bmp)$/.test(f)){
		alert("图片类型必须是.gif,jpeg,jpg,bmp中的一种")
		return false;
	}
	return true;
}

<input type="file" id="UpFile_Photo1" runat="server" name="UpFile_Photo1" 
size="35" onpropertychange="CheckFile(this.value,this)">小图<br />

<input type="file" id="UpFile_Photo2" runat="server" name="UpFile_Photo2" 
size="35" onpropertychange="CheckFile(this.value,this)">中图<br />

<input type="file" id="UpFile_Photo3" runat="server" name="UpFile_Photo3" 
size="35" onpropertychange="CheckFile(this.value,this)">大图<br />

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

Note：

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

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

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

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

参考连接：FileReader

好了，直接上代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<input type="file" name="files" id="file" onchange="verifyImageInfo(this,['jpg','png'],100,{'width':1280,'height':710})">
 
</body>
<script type="text/javascript">
//图片验证（大小，尺寸，类型）
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 <= 0) {
            alert("文件大小不能为0！");
            that.value = "";
            return false;
        }
        return true;
    }else{
        return false;
    }
}
/**
* 图片尺寸验证
* @allow_size_obj {'width':123,"height":345},如果值为0则表示不限
*/
function verificationPicSize(that,allow_size_obj) {
    var filePath = that.value;
    if(filePath){
      //读取图片数据
        var filePic = that.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.onload=function(){
                var width = image.width;
                var height = image.height;
                if(width!=allow_size_obj['width'] && allow_size_obj['width']!=0){
                    alert("文件宽度"+width+"不符合要求");
                    that.value = "";
                    return false;                    
                }
                if(height!=allow_size_obj['height'] && allow_size_obj['height']!=0){
                    alert("文件高度"+height+"不符合要求");
                    that.value = "";
                    return false;                                                
                }
                return true;
            };
            image.src= data;
        };
        reader.readAsDataURL(filePic);   
    }else{
        return false;
    }
}
</script>
</html>

本文链接：https://blog.csdn.net/cplvfx/article/details/125185684

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

《第一行代码》（第二版）广播的问题及其解决_代码里的广播错误-程序员宅基地

文章浏览阅读2.6k次，点赞5次，收藏13次。1）5.2.1弹出两次已连接或者未连接这是因为你同时打开了流量和WiFi，他就会发出两次广播。2）5.3.1中发送自定义广播问题标准广播未能弹出消息：Intent intent=new Intent("com.example.broadcasttest.MY_BROADCAST");sendBroadcast(intent);上述已经失效了。修改：Intent intent=new Intent("com.example.broadcasttest...._代码里的广播错误

K8s 学习者绝对不能错过的最全知识图谱（内含 58个知识点链接）-程序员宅基地

文章浏览阅读249次。作者 |平名阿里服务端开发技术专家导读：Kubernetes 作为云原生时代的“操作系统”，熟悉和使用它是每名用户的必备技能。本篇文章概述了容器服务 Kubernet..._k8知识库

TencentOS3.1安装PHP+Nginx+redis测试系统_tencentos-3.1-程序员宅基地

文章浏览阅读923次。分别是etc/pear.conf，etc/php-fpm.conf， etc/php-fpm.d/www.conf，lib/php.ini。php8安装基本一致，因为一个服务期内有2个版本，所以注意修改不同的安装目录和端口号。可以直接使用sbin下的nginx命令启动服务。完成编译安装需要gcc支持，如果没有，使用如下命令安装。安装过程基本一致，下面是安装7.1.33的步骤。执行如下命令，检查已经安装的包和可安装的包。执行如下命令，检查已经安装的包和可安装的包。执行如下命令，检查已经安装的包和可安装的包。_tencentos-3.1

urllib.request.urlopen()基本使用_urllib.request.urlopen(url)-程序员宅基地

文章浏览阅读3.1w次，点赞21次，收藏75次。import urllib.requesturl = 'https://www.python.org'# 方式一response = urllib.request.urlopen(url)print(type(response)) # <class 'http.client.HTTPResponse'># 方式二request = urllib.request.Req..._urllib.request.urlopen(url)

如何用ChatGPT+GEE+ENVI+Python进行高光谱，多光谱成像遥感数据处理？-程序员宅基地

文章浏览阅读1.5k次，点赞12次，收藏15次。如何用ChatGPT+GEE+ENVI+Python进行高光谱，多光谱成像遥感数据处理？

RS485总线常识_rs485 差分走綫間距-程序员宅基地

文章浏览阅读1.2k次。RS485总线常识 2010-10-12 15:56:36| 分类：知识储备 | 标签：rs485 总线传输差分 |字号大中小订阅RS485总线RS485采用平衡发送和差分接收方式实现通信：发送端将串行口的TTL电平信号转换成差分信号A,B两路输出，经过线缆传输之后在接收端将差分信号还原成TTL电平信号。由于传输线通常使用双绞线，又是差分传输，所_rs485 差分走綫間距

随便推点

移植、制作uboot、Linux（一）_uboot制作-程序员宅基地

文章浏览阅读621次。u-boot、linux烧录_uboot制作

windows下安装git和gitbash安装教程_64-bit git for windows setup.-程序员宅基地

文章浏览阅读1.2w次，点赞10次，收藏44次。windos上git安装，git bash安装_64-bit git for windows setup.

环形链表（算法java）_java 实现环形链表-程序员宅基地

文章浏览阅读196次。环形链表（算法java）的两种解决方法_java 实现环形链表

docker部署Airflow(修改URL-path、更换postgres --＞myslq数据库、LDAP登录)_airflow docker-程序员宅基地

文章浏览阅读5.7k次。Airflow什么是 Airflow？Airflow 的架构Airflow 解决哪些问题一、docker-compose 安装airflow（postgres）1、创建启动文件airflow-docker-compose.yml.1.1、添加挂载卷，需要修改airflow-docker-compose.yml的位置2、创建本地配置文件airflow.cfg2.1、如果想修改WEB URL地址，需要修改airflow.cfg中以下两个地方3、之后up -d直接启动即可web访问地址：二、存储数据库更换post_airflow docker

计算机毕业设计springboot高校教务管理系统532k79【附源码+数据库+部署+LW】-程序员宅基地

文章浏览阅读28次。选题背景：随着社会的发展和教育的普及，高校教务管理系统在现代高等教育中扮演着至关重要的角色。传统的手工管理方式已经无法满足高校日益增长的规模和复杂的管理需求。因此，开发一套高效、智能的教务管理系统成为了当今高校管理的迫切需求。选题意义：高校教务管理系统的开发具有重要的意义和价值。首先，它可以提高高校教务管理的效率和准确性。通过自动化处理学生选课、排课、考试安排等繁琐的事务，大大减轻了教务人员的工作负担，提高了工作效率。同时，系统可以实时更新学生信息和课程信息，减少了数据错误和冗余，保证了管理的准确性

javaint接收float_Java Integer转换double，float，int，long，string-程序员宅基地

文章浏览阅读132次。首页>基础教程>常用类>常用 Integer类Java Integer转换double，float，int，long，stringjava中Integer类可以很方便的转换成double，float，int，long，string等类型，都有固定的方法进行转换。方法double doubleValue() //以 double 类型返回该 Integer 的值。flo..._java integet接收float类型的参数