按长宽比例预览上传的本地图片（javascript）（兼容ie，firefox，chrome）
一 兼容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>