按长宽比例预览上传的本地图片（javascript）（兼容ie，firefox，chrome） -

jackleechina

浏览: 585534 次
性别:
来自: 上海

最近访客更多访客>>

gxlit

justsimple

fkshl

峰采啊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

按长宽比例预览上传的本地图片（javascript）（兼容ie，firefox，chrome）

博客分类：

javaScript

一兼容ie和firefox 浏览本地图片

<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 ||agent.indexOf("Chrome") != -1) {
        //火狐浏览器判断  
        document.getElementById("preview").src = window.URL.createObjectURL(o.files[0]); //显示预览图  
        alert(document.getElementById("preview").src);
        var fileSize = o.files[0].size; //获取文件大小  
        alert(fileSize);
        if (fileSize > 1024) {
            alert("文件不能大于1M");
        } else {
            alert("文件符合大小");
        }
    }
}
        </script>
    </head>
    
    <body>
        <div>
            <img id="preview" style="width: 80px; height: 85px; border: 0px;" />
        </div>
        <br />
        <input type="file" id="file" name="file" onchange="perImg(this)" />
    </body>

</html>

二）兼容 ie,firefox,chrome 浏览本地图片

<style type="text/css">
#preload{
	position:absolute;
	left:"-9999px";
	top:"-9999px";
	width:"1px";
	height:"1px";
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
}
</style>

function setImagePreview() {
		var MaxWidth=205;
        var docObj=document.getElementById("imageFile");
        var f=docObj.value;
        if(length(f)>20){
			alert("文件名必须小于20个英文字符(即10个中文字符)！");
			return false;	
		}
        /* firefox 下正常
	    var fileInput = $("#imageFile")[0];
	    byteSize  = fileInput.files[0].size;
	 	if( Math.floor(byteSize/1024)>5*1024 ){
	 		alert("图片不能大于5M");
	 		return false;
	 	}*/
 		if(!f.match(/.jpg|.gif|.jpeg|.png|.bmp/i))
        {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        
        var imgObjPreview=document.getElementById("preview");
        if(docObj.files &&    docObj.files[0]){
              //火狐下，直接设img属性
              imgObjPreview.style.display = 'block';
              //imgObjPreview.style.width = '200px';
              //imgObjPreview.style.height = '350px';                    
              //imgObjPreview.src = docObj.files[0].getAsDataURL();
		      //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
			 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
			 Wa_SetImgAutoSize(imgObjPreview);
        }else{
              //IE下，使用滤镜
              docObj.select();
              var imgSrc = document.selection.createRange().text;
              var preload = document.getElementById("preload");
              var localImagId = document.getElementById("localImag");
              //必须设置初始大小, 如果没虾米的初始化赋值，preload.offsetWidth，preload.offsetHeight都为0
              preload.style.width = "1px";
              preload.style.height = "1px";
              preload.style.top= "-9999px";
              preload.style.left = "-9999px";
              //图片异常的捕捉，防止用户修改后缀来伪造图片
			   try{
				       preload.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)";
					   preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		               localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
		               localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		               alert(preload.offsetWidth+"a ");
		            	   localImagId.style.width=MaxWidth+"px";
		            	   localImagId.style.height= Math.floor(MaxWidth*(preload.offsetHeight/preload.offsetWidth))+"px";
	          }catch(e){
	                alert("您上传的图片格式不正确，请重新选择!");
	                return false;
	           }
	           imgObjPreview.style.display = 'none';
	           document.selection.empty();
		       }
		       return true;
     }

	function length(str) {
		var strArray=str.split("\\");
		str=strArray[strArray.length-1];
	    var realLength = 0, len = str.length, charCode = -1;
	    for (var i = 0; i < len; i++) {
	        charCode = str.charCodeAt(i);
	        if (charCode >= 0 && charCode <= 128) realLength += 1;
	        else realLength += 2;
	    }
	    return realLength;
	}

<div id="preload" ></div>
<div id="localImag" >
								<img id="preview" style="width:205px;height:auto" src="<%=request.getContextPath() %>/api/ad/v1/splash/download?splash_id=${splashPicture.id}" onload="Wa_SetImgAutoSize(this)" />
							</div>

分享到：

POI根据模板(excel表头)导出excel | 在限定范围内实现图片自动缩放

2014-01-16 14:35
浏览 2657
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

按长宽比例预览上传的本地图片（javascript）（兼容ie，firefox，chrome）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

按长宽比例预览上传的本地图片（javascript）（兼容ie，firefox，chrome）

评论

发表评论

相关推荐

时区相关

时区相关

前端api

在限定范围内实现图片自动缩放

jquery的attr(“onchange”,函数名)

JS中数据类型的判断

JS 中toFixed()的bug

javaScript和jquery在onclick函数上的一些区别

js判断变量是否未定义

javascript设置onclick

document.selection 的 empty() 与 clear() 特殊用法

最近访客更多访客>>