`
silenceisall
  • 浏览: 30448 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论

jsp预览图片——兼容firefox IE7 IE8

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>   
<style type="text/css">   
#preview_wrapper{    
    display:inline-block;    
    width:300px;    
    height:300px;    
    background-color:#CCC;    
}    
#preview_fake{ /* 该对象用户在IE下显示预览图片 */    
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(sizingMethod=scale);    
}    
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */

   
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(sizingMethod=image);      
    visibility:hidden;    
}    
#preview{ /* 该对象用户在FF下显示预览图片 */    
    width:300px;    
    height:300px;    
}    
</style>   
   
<script type="text/javascript">   
function onUploadImgChange(sender){    
    if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){    
        alert('图片格式无效！');    
        return false;    
    }    
        
    var objPreview = document.getElementById( 'preview' );    
    var objPreviewFake = document.getElementById( 'preview_fake' );    
    var objPreviewSizeFake = document.getElementById( 'preview_size_fake'

);    
        
    if( sender.files &&  sender.files[0] ){    
        objPreview.style.display = 'block';    
        objPreview.style.width = 'auto';    
        objPreview.style.height = 'auto';    
            
        // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的

文件路径    
        objPreview.src = sender.files[0].getAsDataURL();        
    }else if( objPreviewFake.filters ){     
        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果    
        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决    
            
        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的

文件路径    
        sender.select();    
        var imgSrc = document.selection.createRange().text;    
            
        objPreviewFake.filters.item(    
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  

 
        objPreviewSizeFake.filters.item(    
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  

 
            
        autoSizePreview( objPreviewFake,     
            objPreviewSizeFake.offsetWidth,

objPreviewSizeFake.offsetHeight );    
        objPreview.style.display = 'none';    
    }    
}    
   
function onPreviewLoad(sender){    
    autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );   

 
}    
   
function autoSizePreview( objPre, originalWidth, originalHeight ){    
    var zoomParam = clacImgZoomParam( 300, 300, originalWidth,

originalHeight );    
    objPre.style.width = zoomParam.width + 'px';    
    objPre.style.height = zoomParam.height + 'px';    
    objPre.style.marginTop = zoomParam.top + 'px';    
    objPre.style.marginLeft = zoomParam.left + 'px';    
}    
   
function clacImgZoomParam( maxWidth, maxHeight, width, height ){    
    var param = { width:width, height:height, top:0, left:0 };    
        
    if( width>maxWidth || height>maxHeight ){    
        rateWidth = width / maxWidth;    
        rateHeight = height / maxHeight;    
            
        if( rateWidth > rateHeight ){    
            param.width =  maxWidth;    
            param.height = height / rateWidth;    
        }else{    
            param.width = width / rateHeight;    
            param.height = maxHeight;    
        }    
    }    
        
    param.left = (maxWidth - param.width) / 2;    
    param.top = (maxHeight - param.height) / 2;    
        
    return param;    
}    
</script>   
   
</head>   
   
<body>   
    <div id="preview_wrapper">   
        <div id="preview_fake">   
            <img id="preview" onload="onPreviewLoad(this)"/>   
        </div>   
    </div>   
    <br/>   
    <input id="upload_img" type="file" onchange="onUploadImgChange

(this)"/>   
    <br/>   
    <img id="preview_size_fake"/>   
</body>   
</html>

分享到：
| 高性能JAVA开发之内存管理
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics