js头像预览

来源：互联网发布：天书残卷圣物进阶数据编辑：程序博客网时间：2024/06/05 07:00

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css">
#preview_wrapper{
    display:inline-block;
    width:100px;
    height:100px;
    background-color:#FFFFFF;
}
#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:100px;
    height:100px;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender,falg){
    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();

        autoSizePreview( objPreview, 20, 20 );

    }else if( objPreviewFake.filters ){
        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径

        sender.select();
        var imgSrc;
        if(falg = 0){
        imgSrc = "../images/user_photo_01.jpg" ;
        }else{
        imgSrc = document.selection.createRange().text;
        }
        document.selection.empty();

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

        autoSizePreview( objPreviewFake, 20, 20 );

        objPreviewSizeFake.parentNode.removeChild(objPreviewSizeFake) ;

        var img = document.createElement("img");
        img.id = "preview_size_fake";

        document.getElementById('preview_wrapper').appendChild(img);
        objPreview.style.display = 'none';
    }
}

function autoSizePreview( objPre, originalWidth, originalHeight ){
    objPre.style.width = 100 + 'px';
    objPre.style.height = 100 + 'px';
    objPre.style.marginTop = 0 + 'px';
    objPre.style.marginLeft = 0 + 'px';
}
</script>

</head>

<body>
    <div id="preview_wrapper">
        <div id="preview_fake">
            <img id="preview" src="<%=request.getContextPath() %>/images/user_photo_01.jpg"/>
        </div>
        <img id="preview_size_fake" />
    </div>
    <input id="upload_img" type="file" onchange="onUploadImgChange(this,1)"/>

</body>

</html>