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

向右看齐 2022-10-02 04:51 236阅读 0赞

//判断图片类型
    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 />

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript头像图片上传插件支持上传类型大小尺寸验证

一行代码实现头像上传，图片大小、尺寸，类型验证 html调用 <img src="这里放默认头像" id="preview" onclick="uploader

清疚/ 2024年03月22日 10:12/ 0 赞/ 71 阅读

相关 js判断上传文件大小

兼容ie6，ie7，ie8 ，Google Chrome，ff等浏览器，ie8上面在安全设置处设置一下就好了(工具 => Internet选项 => 安全 => Interne

电玩女神/ 2023年10月16日 20:28/ 0 赞/ 74 阅读

相关 js上传图片限制图片尺寸方法

上传图片限制图片尺寸 async beforeUploadPicture(file) { // 直播大图 const width = 347

怼烎@/ 2022年11月11日 05:25/ 0 赞/ 229 阅读

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

//判断图片类型 var f=document.getElementById("File1").value; if(f==" "){ ale

向右看齐/ 2022年10月02日 04:51/ 0 赞/ 237 阅读

相关文件上传判断大小和类型

html: <input type="file"> javascript: // 实现文件上传的类型和大小约束 document.querySel

曾经终败给现在/ 2022年08月28日 07:43/ 0 赞/ 204 阅读

相关 js上传图片进行预览、验证格式及尺寸

<script type="text/javascript"> var flag = 0; / 校验表单 / functi

末蓝、/ 2022年08月22日 03:52/ 0 赞/ 260 阅读

相关 js获取上传图片真实的尺寸大小和存储大小

</pre><pre name="code" class="html"><input id="file" type="file"> <input id="But

快来打我*/ 2022年07月15日 16:22/ 0 赞/ 287 阅读

相关 springmvc处理上传图片代码(校验图片尺寸、图片大小)

package com.maizuo.web.controller; import com.maizuo.domain.Result; imp

水深无声/ 2022年06月07日 05:15/ 0 赞/ 292 阅读

相关 element upload限制上传图片尺寸、大小、比例

// 上传前判断 public async beforeUpload(file: any) { const is1M = fil

桃扇骨/ 2021年11月15日 13:38/ 0 赞/ 786 阅读

相关 java判断上传图片格式

由于客户上传图片将png的图片的后缀名改为jpg,所以通过后缀名判断不行,用下面这个方法可以 //判断是否是JPG格式 log.

雨点打透心脏的1/2处/ 2021年11月02日 15:50/ 0 赞/ 374 阅读