图片上传的一些问题

我想做一个图片上传，首先能兼容ie6,7,8和火狐，并且能够实现上传前本地预览，并控制图片的宽高及大小
现在主要遇到如下问题
1.ie6下该隐藏的图层在页面初始化时不隐藏，选择图片后该层就隐藏了，单图片显示比例不是很协调
2.火狐下不能正确读取图片宽高，首次读取宽是我设定的最大宽度，下次读取时时上张图片的宽度，高度读取没什么问题
ie7下测试没发现什么明显问题，ie8没有测试估计没什么问题
下面是我的代码，请大家帮忙看下谢谢了jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css">
#preview_wrapper0{
     display:inline-block;
     width:183px;
     height:208px;
     background-color:#CCC;
}
#preview_fake0{ /* 该对象用于在IE下显示预览图片 */
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview0{ /* 该对象用于在FF下显示预览图片 */
     width:183px;
     height:208px;
}
#preview_size_fake0{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
     visibility:hidden;
}
#preview_wrapper{
     display:inline-block;
     width:459px;
     height:238px;
     background-color:#CCC;
}
#preview_fake{ /* 该对象用于在IE下显示预览图片 */
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview{ /* 该对象用于在FF下显示预览图片 */
     width:459px;
     height:238px;
}
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
     visibility:hidden;
}
</style><script type="text/javascript">
function zero(obj)
{
    if(!onUploadImgChange(obj,'show'))
    {
        document.getElementById("span0").innerHTML="<input id='upload_img0' type='file' onChange='zero(this)'/>";;
    }
}function one(obj){
    if(!onUploadImgChange(obj,'details'))
    {
     document.getElementById("span1").innerHTML="<input id='upload_img' type='file' onChange='one(this)'/>";
    }
}</script>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
    <span id="span0"><input id="upload_img0" type="file" onChange="zero(this)"/></span>
    <br/>
    <div id="preview_wrapper0">
        <div id="preview_fake0">
            <img id="preview0"/><img id="preview_size_fake0"/>
        </div>
    </div>

    <span id="span1"><input id="upload_img" type="file" onChange="one(this)"/></span>
    <br/>
    <div id="preview_wrapper">
        <div id="preview_fake">
            <img id="preview"/><img id="preview_size_fake"/>
        </div>
    </div>
</body>
</html>js代码：
function onUploadImgChange(sender,type){

//首先判断将上传的文件格式
     if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
         alert('图片格式无效！');
         return false;
     }
     //判断将验证的是哪张图片（type==“show”：首页展示图片，type=“details”：详细页展示图片）
       if(type=="show"){
        var objPreview = document.getElementById( 'preview0' );
        var objPreviewFake = document.getElementById( 'preview_fake0' );
        var objPreviewSizeFake = document.getElementById( 'preview_size_fake0' );
        var allowWidth=183;
        var allowHeight=208;
       }else if(type=="details"){
        var objPreview = document.getElementById( 'preview' );
        var objPreviewFake = document.getElementById( 'preview_fake' );
        var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
        var allowWidth=459;
        var allowHeight=238;
       }
     //判断当前客户端浏览器（当前情况火狐）
     if( sender.files &&   sender.files[0] ){
     //火狐下用于预览图片的img控件显示
        objPreview.style.display = 'block';
        objPreview.style.width = 'auto';
        objPreview.style.height = 'auto';
        objPreview.src = sender.files[0].getAsDataURL();

        if(objPreview.width!=allowWidth||objPreview.height!=allowHeight){
         alert("图片尺寸不符，请换图");
         return false;
        }else{
         alert("尺寸对了");
         return true;
        }
       //当前情况ie7，ie8
     }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;         //如果是IE浏览器则用于在火狐下预览图片的img控件隐藏
         objPreview.style.display = 'none';
       return  autoSizePreview( objPreviewFake,
             objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight,allowWidth,allowHeight );

     }
}

function autoSizePreview( objPre, originalWidth, originalHeight,allowWidth,allowHeight ){
alert("............."+originalWidth+"............");
alert("............."+originalHeight+"...........");

     var zoomParam = clacImgZoomParam(  allowWidth,allowHeight, 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';

    if(originalWidth!=allowWidth||originalHeight!=allowHeight){
     alert("图片尺寸不符，请换图");
     return false;
    }else{
     alert("尺寸对了");
     return true;
    }
}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;
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

呵呵，IE8下会没问题？
图片预览在IE8下是不可能实现的！！！！！
原因有两个
1.因为权限限制，如果不是信任站点。预览的图片根本无法显示
2.如果客户端设置了隐藏路径。那么从file控件中取出的根本不是图片的绝对路径，而是c:/fakepath/***.jpg之类的。以上问题我看你注释中有写但是
ie7，ie8应该是一样的，是用滤镜处理的预览图片，img.value是不可能获取到图片的本地路径的，ie7下是没有问题的，还请你将但是后的话说清楚也好参考下，谢谢了。  还有就是您说ie8下是不能实现本地图片上传前预览的，那我给怎么实现这部分功能呢，希望指点一下谢谢了
利用中间页面或者iframe 实现不刷新上传到服务器  这个是大部分网站用的技巧  你可以用google 搜搜看应该会找到  为了安全 FF  opera 浏览器都不支持映射到本地文件  所以只能先上传到服务器