按长宽比例预览上传的本map片（javascript）（兼容ie，firefox，chrome）
日期：2014-05-16 浏览次数：20521 次
按长宽比例预览上传的本地图片（javascript）（兼容ie，firefox，chrome）
一 兼容ie和firefox 浏览本地图片
二）兼容 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)";
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
