IE9下本地图片预览JS代码修改

Bertha 。 2022-06-13 12:47 233阅读 0赞

**AlphaImageLoader**

**说明：**

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

**语法：**

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

**enabled：**可选项。布尔值(Boolean)。设置或检索滤镜是否激活。  
true：默认值。滤镜激活。  
false：滤镜被禁止。

**sizingMethod：**可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。  
crop：剪切图片以适应对象尺寸。  
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。  
scale：缩放图片以适应对象的尺寸边界。

**src：**必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

--------------------

**具体操作：**

1.  为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
2.  为 AlphaImageLoader 设置 src 属性。

--------------------

**示例代码：**

** **

<form id="imgup" method="post" enctype="multipart/form-data" action="picup.ashx">
    <input type="file" name="upf" id="fileup" οnchange="dox(this)" />
    </form>
    <div id="tp" style="width:200px;height:200px"></div>
    <script type="text/javascript" charset="utf-8" language="javascript">
    function dox(obj)
    {
    obj.select();
    obj.blur();
    var nfile = document.selection.createRange().text;
    alert("当前选择的文件完整路径是:"+nfile);
    document.selection.empty();     document.getElementById("tp").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
    }
    </script>

**示例代码：**

<? xml version="1.0" encoding="gb2312" ?> 
     <! 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=gb2312"   /> 
     < title > 本地图片预览代码（支持 IE6、IE7） </ title > 
      < style  type ="text/css" >  
    #newPreview
     {} { 
        filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) ; 
     } 
     </ style > 
      < script  type ="text/javascript"  language ="javascript" >  
      
     </ script > 
     </ head > 
     
     < body > 
     
     < p > 说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/，则可以看到全部预览。 </ p > 
     
     < hr  /> 
     
     < p > 如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。 </ p > 
     < div  id ="oldPreview" ></ div > 
     
     < hr  /> 
     
     < p > 不论您使用的是 IE6 还是 IE7，均可以看到以下预览。 </ p > 
     < div  id ="newPreview" ></ div > 
     
     < hr  /> 
     
     < p > 请选择一个图片进行预览： < input  type ="file"  size ="20"  onchange ="javascript:PreviewImg(this);"   /></ p > 
     
     </ body > 
     
     </ html >

示例代码3：

<p><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();
      sender.blur();
      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" οnchange="onUploadImgChange(this)"/> 
    <div id="kk">
    <div id="preview_wrapper">
    <div id="preview_fake">
    <img id="preview" src="" οnlοad="onPreviewLoad(this)"/>
    </div>
    </div>
    <br/> 
    <img id="preview_size_fake" />
    </div></p>