请教guansong8079776，关于缩略图的问题

用你的代码，在ie8上没问题，但是在ie7上，图片大小都变成了28*30，请问是怎么回事啊？<!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|.emf|.wmf|.png|.bmp/i ) ){        
        alert('图片格式无效！');        
        return false;        
    }        
    
var filename = (sender.value);
numD = filename.lastIndexOf(".");
    numB = filename.lastIndexOf("\\");
    fileType = filename.substr(numD + 1);
    fileName = filename.substring(numB+1,numD);    
    document.getElementById("t1").value = fileName;
    document.getElementById("t2").value = fileType;        
    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;        
         
   document.getElementById("t1").value=objPreviewSizeFake.offsetHeight + ":" + objPreviewSizeFake.offsetWidth;
         
        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"/>       
<input type="text" name="T1" id="t1" size="20">       
<input type="text" name="T2" id="t2" size="20">       
</body>       
</html>       

解决方案 »

  1.   

     <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"/>       
    这部分内容放到单元格中在ie7就会出现图片变小的现象，是怎么回事？
      

  2.   

    <img id="preview_size_fake"/>   
    这行代码的原因，但是如果放到最后面，浏览器下方又会多出一块很大地方，该怎么解决该问题
      

  3.   

    <!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;        
                
        background-color:#CCC;        
    }        
    #preview_fake{ /* 该对象用户在IE下显示预览图片 */        
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);        
    }        
    #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */        
      position:absolute;
        visibility:hidden;  
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);          
      
     
        
    }        
    #preview{ /* 该对象用户在FF下显示预览图片 */        
         
    } 
     </style>       
           
    <script type="text/javascript">    function onUploadImgChange(sender) {
            if (!sender.value.match(/.jpg|.gif|.emf|.wmf|.png|.bmp/i)) {
                alert('图片格式无效！');
                return false;
            }        var filename = (sender.value);
            numD = filename.lastIndexOf(".");
            numB = filename.lastIndexOf("\\");
            fileType = filename.substr(numD + 1);
            fileName = filename.substring(numB + 1, numD);
            document.getElementById("t1").value = fileName;
            document.getElementById("t2").value = fileType;
            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;            document.getElementById("t1").value = objPreviewSizeFake.offsetHeight + ":" + objPreviewSizeFake.offsetWidth;            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(originalWidth, originalHeight, 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/>       
         
    <input type="text" name="T1" id="t1" size="20">       
    <input type="text" name="T2" id="t2" size="20">     <br />     <img id="preview_size_fake"/>   
    </body>       
    </html>       
      

  4.   

    空白区是由下面的图片来的，你想个办法让下面的图片和上面的image重合就行了。<!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;        
                
        background-color:#CCC;        
    }        
    #preview_fake{ /* 该对象用户在IE下显示预览图片 */        
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);        
    }        
    #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */        
      position:absolute;
        visibility:hidden;  
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);          
      
     
        
    }        
    #preview{ /* 该对象用户在FF下显示预览图片 */        
         
    } 
     </style>       
           
    <script type="text/javascript">    function onUploadImgChange(sender) {
            if (!sender.value.match(/.jpg|.gif|.emf|.wmf|.png|.bmp/i)) {
                alert('图片格式无效！');
                return false;
            }        var filename = (sender.value);
            numD = filename.lastIndexOf(".");
            numB = filename.lastIndexOf("\\");
            fileType = filename.substr(numD + 1);
            fileName = filename.substring(numB + 1, numD);
            document.getElementById("t1").value = fileName;
            document.getElementById("t2").value = fileType;
            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;            document.getElementById("t1").value = objPreviewSizeFake.offsetHeight + ":" + objPreviewSizeFake.offsetWidth;            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(originalWidth, originalHeight, 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="test" style="border:1px inset #000000; position:absolute">
        <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/>       
         
    <input type="text" name="T1" id="t1" size="20">       
    <input type="text" name="T2" id="t2" size="20">     <br />     <img id="preview_size_fake" />   
    </div>
    </body>       
    </html>             
      

  5.   

    可是上面的图示缩略图，是比较小的，图片过大还是会出现滚动条的
    我加上left:-1000px;top:-1000px;
    暂时解决问题
      

  6.   


    //这行代码是控制预览图片大小的，自己修改成想要的就行了
    var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );     
    //预览图片为300
    //var zoomParam = clacImgZoomParam( 300, 300, 300, 300);   
    //预览图片为实际大小
     // var zoomParam = clacImgZoomParam(originalWidth, originalHeight, originalWidth, originalHeight);
      

  7.   

    测试IE9和FireFox成功啦，主要是加个外层控制大小，代码：
    <style type="text/css">
    #kk{
    width:400px;
    height:400px;
    overflow: hidden;
    }
    #preview_wrapper{
    width:300px;
    height:300px;
    background-color:#CCC;
    overflow: hidden;
    }   
    #preview_fake{ /* 该对象用于在IE下显示预览图片 */   
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);   
    width:300px;
    overflow: hidden;
    }   
    #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */   
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);  
    width:300px; 
        visibility:hidden; 
    overflow: hidden;  
    }   
    #preview{ /* 该对象用于在FF下显示预览图片 */   
        width:300px;   
        height:300px;  
    overflow: hidden; 
    }   
    </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> <input name="localfile"  type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> <!--以下是预览图片用的-->
    <div id="kk">
    <div id="preview_wrapper">
    <div id="preview_fake">
    <img id="preview" src="" onload="onPreviewLoad(this)"/>
    </div>
    </div>
    <br/> 
    <img id="preview_size_fake" />
    </div>
      

  8.   

    好像一定要这句哦   alert("已成功选择图片！");   奇怪
    <style type="text/css">
    #kk{
    width:400px;
    height:400px;
    overflow: hidden;
    }
    #preview_wrapper{
    width:300px;
    height:300px;
    background-color:#CCC;
    overflow: hidden;
    }   
    #preview_fake{ /* 该对象用于在IE下显示预览图片 */   
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);   
    width:300px;
    overflow: hidden;
    }   
    #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */   
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);  
    width:300px; 
        visibility:hidden; 
    overflow: hidden;  
    }   
    #preview{ /* 该对象用于在FF下显示预览图片 */   
        width:300px;   
        height:300px;  
    overflow: hidden; 
    }   
    </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;  
            alert("已成功选择图片！");
            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> <input name="localfile"  type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> <!--以下是预览图片用的-->
    <div id="kk">
    <div id="preview_wrapper">
    <div id="preview_fake">
    <img id="preview" src="" onload="onPreviewLoad(this)"/>
    </div>
    </div>
    <br/> 
    <img id="preview_size_fake" />
    </div>