html 选择图片显示

最新推荐文章于 2025-01-07 11:58:19 发布

dwj200810

最新推荐文章于 2025-01-07 11:58:19 发布

阅读量448

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/dwj200810/article/details/84426259

html 专栏收录该内容

6 篇文章

订阅专栏

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>用户中心</title>
  <base href=""/>
  <meta http-equiv="keywords" content="${keywords}">
  <meta http-equiv="description" content="${description}">
  <script type="text/javascript">
     function perImg(o){
        var filepath = "";//文件路径
        var agent=window.navigator.userAgent;
        var isIE7 = agent.indexOf('MSIE 7.0') != -1; 
        var isIE8 = agent.indexOf('MSIE 8.0') != -1;
        if( !o.value.match(/.jpg|.gif|.png|.bmp/i)){
             alert('图片格式无效！');
             return;
        }
        if(agent.indexOf("Firefox")!=-1){

        //火狐浏览器判断
            document.getElementById("preview").src = window.URL.createObjectURL(o.files[0]);//显示预览图
            var fileSize=o.files[0].size; //获取文件大小
			alert(fileSize);
            if(fileSize>1024*1024){
                alert("文件不能大于1M");
				return false ; 
            }

			document.getElementById("preview").onload=function(){
				getPic();
			}

        }else{//IE浏览器
			document.getElementById("preview").src =o.value; //显示预览图片			
			var img=new Image();//动态创建img
			img.src=o.value;
			img.style.display="none";
			if(img.readyState=="complete"){//已经load完毕，直接打印文件大小
				var height = img.height; 
				var width = img.width; 
				var size= Math.round(img.fileSize / 1024 * 100) / 100;// 取得图片文件的大小
				alert(size+" KB--宽--"+width+"--高--->"+height);//ie获取文件大小
			}else{
				img.onreadystatechange=function(){
					if(img.readyState=='complete'){//当图片load完毕
						var height = img.height; 
						var width = img.width; 
						var size= Math.round(img.fileSize / 1024 * 100) / 100;// 取得图片文件的大小
						alert(size+" KB--宽--"+width+"--高--->"+height);//ie获取文件大小
					}
				}
			}
  		} 
    }

	function getPic(){
		var width = document.getElementById("preview").width;
		var height= document.getElementById("preview").height;
		alert(width);
		alert(height);
		if(width > 800){
			alert("图片宽度不符合"); 	
			return false ;
		}
		if(height > 800){
			alert("图片高度不符合"); 	
			return false ;
		}	
	}
    </script>

 </head>
 <body>
  <div>
   <img id="preview" width="120" height="100"  />
  </div>
  <br />
  <input type="file" id="file" name="file" onChange="perImg(this)" />
 </body>
</html>