读书人
栏目▼

请问guansong8079776关于缩略图的有

发布时间： 2012-02-24 16:30:39 作者： rapoo

请教guansong8079776，关于缩略图的问题
用你的代码，在ie8上没问题，但是在ie7上，图片大小都变成了28*30，请问是怎么回事啊？

HTML code
 
  <!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>


[解决办法]
<!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>

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net