JS验证上传图片格式和大小

最新推荐文章于 2024-01-09 16:29:15 发布

TByoung

最新推荐文章于 2024-01-09 16:29:15 发布

阅读量1k

点赞数

分类专栏： JS JAVA开发技术心得文章标签： javascript 图片验证 path JS 图片

本文链接：https://blog.csdn.net/qq_19524879/article/details/38867133

版权

JS 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

JAVA开发技术心得

26 篇文章 0 订阅

订阅专栏

代码上面注释很明确我就不解释了！

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
<script>
//限制上传图片大小100K 
var MAXSIZE = 140 * 1024; 
//图片大小限制信息 
var ERROR_IMGSIZE = "图片大小不能超过140K"; 
function accp(){//显示选择图片
   var imgurl= document.getElementById("fileurl").value;<pre name="code" class="javascript">var filename="";
						if(imgurl.indexOf(".")>0){
						 filename=imgurl.substring(imgurl.lastIndexOf("."),imgurl.length);
						}
						else
						{
							filename=path;
						}
						var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i; 
	                    if(!exp.test(filename)){
							updateTips("图片格式错误！请重新选择图片！");
				            document.getElementById("img").src="";  
						}

   document.getElementById("img").src=imgurl;
}
function updateTips(str) { //提示信息
   document.getElementById("errorTips").innerHTML=str;  
} 
function sizeCheck(img) { 
     updateTips(""); 
	  if(img.readyState=="complete"||img.readyState=="loaded"){ //onload加载完成
               if (img.fileSize > MAXSIZE) { //判断图片的大小是不是满足
					updateTips(ERROR_IMGSIZE);
					document.getElementById("img").src="";
				}  
        }else{
			updateTips("图片加载未完成！请重新选择图片！");
			document.getElementById("img").src="";   
		}
} 
</script>
<body>
<font size="2" color="#663300">
	<strong>
		<table>
			<tr>	
				<td colspan="2" class="label">
					<font size="2" color="#ff0066">
						<center><span id="errorTips"> </span> </center>
					</font>
				</td>			
			</tr>
			<tr>	
				<td colspan="" class="label">
					<center>文件上传</center>
				</td>
				<td class="label" align="left">
					<div id="d">
						<input type="file" id="fileurl" name="fileurl" value="" onChange="accp()" /> 
					</div>
				</td>
			<tr>	
				<td colspan="2" class="label">
					<center>
						<font size="1" color="red">注意文件的大小不能大于140K！文件的格式jpg，png格式</font>
					</center>
				</td>
			</tr>
			<tr>
				<td colspan="" valign="top"  class="label">
					<center>图片预览</br>
						<input type="button" value="上传图片" οnclick="">
					</center>
				</td>
				<td class="label" align="left">
					<div id="d">
						<img id="img"  οnlοad="sizeCheck(this)" class="img" height="200px" width="200px" src="">
					</div>
				</td>
		    </tr>
		</table>
	</strong>
</font>
 </body>
</html>