您的位置：首页 > Web前端 > JavaScript

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

2014-08-27 11:05 696 查看
代码上面注释很明确我就不解释了！

<!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="上传图片" onclick="">
					</center>
				</td>
				<td class="label" align="left">
					<div id="d">
						<img id="img"  onload="sizeCheck(this)" class="img" height="200px" width="200px" src="">
					</div>
				</td>
		    </tr>
		</table>
	</strong>
</font>
 </body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航