兼容IE6,IE7的JS图片预览代码

申明:
在对象容器边界内,在对象的背景和剧情之间展现一张图纸。并提供对此图片的分开和更改尺寸的操作。要是载入的是PNG(Portable
Network Graphics卡塔尔(英语:State of Qatar)格式,则0%-100%的反射率也被提供。 语法: filter :
progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled ,
sizingMethod=sSize , src=sUTiggoL 卡塔尔enabled:可选项。布尔值。设置或探索滤镜是或不是激活。
true:私下认可值。滤镜激活。 false:滤镜被明令禁绝。
sizingMethod:可选项。字符串。设置或查究滤镜成效的对象的图纸在目的容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:私下认可值。增大或减少对象的尺寸边界以适应图片的尺码。
scale:缩放图片以适应对象的尺寸边界。
src:必选项。字符串。使用相对化或相对 url
地址钦定背景图像。借使忽视此参数,滤镜将不会成效。 具体操作:
为预览区域增加样式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader;。
为 AlphaImageLoader 设置 src 属性。 示例文件:

 

本土图片预览代码

 

表达:以下针对的是互连网意况,如若您在地头作测验,比如输入的地址是:

<html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>JS上传前预览图片</title> 
    <script type="text/javascript" language="javascript">
    <!--            
    function PreviewImg(imgFile){
        var newPreview = document.getElementById("newPreview");
        var imgDiv = document.createElement("div");
        document.body.appendChild(imgDiv); 
        var image=new Image(); 

        image.src=imgFile.value;
        imgDiv.style.width = image.width;
        imgDiv.style.height = image.height;
        imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
        imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
        newPreview.appendChild(imgDiv);
        var showPicUrl = document.getElementById("showPicUrl");
        showPicUrl.innerText=imgFile.value;
        //newPreview.style.width = "80px";
        //newPreview.style.height = "60px";
    }
    -->
    </script>
    </head>
    <body>
    <p>兼容IE6、IE7</p>
    <div id="newPreview"></div>
    <div id="showPicUrl"></div>
    <hr />
    <p>
    选择图片:<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
    </p>
    </body>
</html>

 

倘诺你使用的是 IE6,则能够看来以下预览;假如您使用的是
IE7,则看不到以下预览。

 


 

随意你使用的是 IE6 照旧 IE7,均能够见到以下预览。

 


关键点是用了三个滤镜

请接受一个图形张开预览:

 

[Ctrl+A 全选 注:如需引进外界Js需刷新本领试行]

 

 

相关资料