【转】input-file的本地图片预览+等比例缩放-兼容IE8、火狐

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" >
< html  xmlns ="" >
< 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: 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 >

转载于:https://www.cnblogs.com/luowei/archive/2012/10/08/2715926.html