IE滤镜，上传前的缩略图等比例展示兼容IE（不用先上传到服务器）

滤镜说明：

在对象容器边界内，在对象的背景和内容之间显示一张图片。
并提供对此图片的剪切和改变尺寸的操作。
如果载入的是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、img.select(); 时

文本控件必须要显示，否则无法选中，若为了美观，可设置其大小为1px且透明度为1，
或者在select() 前显示，select后马上隐藏 ，然后再通过 label 的 for属性与其关联。

（1）方式一

<div style="bacbackground-color:#ffffff;opacity:0;">
    <input id="call_img" style="width: 1px;height: 1px;"  type="file"  />
div>

（2）方式二

$("#call_img").show();
$("#call_img")[0].select();
$("#call_img").hide();

2、缩略图等比例缩放问题。

宽和高需要在再在完成后才能获取，直接新建个 Image对象去onload只能获取本地的，
而当服务不在本机时则获取不到，可以根据获取到 src 来创建一图片再去获取其宽高属性 

4、将过滤禁用

$("#show_div")[0].style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false,sizingMethod=scale)";

代码

JS：

//缩略图最大高度
var showMaxHeight = "100";
//缩略图最大宽度
var showMaxWidth = "400";

var img = $("#call_img")[0];
var showDiv = $("#show_div")[0]; 
img.select();  
img.blur();//解决IE9不兼容的问题      
//获取 图片 地址
var imgSrc = document.selection.createRange().text; 
//新建一个图片放入body 再读取，然后获取其宽和高
$('').appendTo('body');
tmpImg.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
var tmpImg = $("#tmpImg")[0];
//获取实际宽高
var tW = tmpImg.offsetWidth;
var tH = tmpImg.offsetHeight;
//根据最大宽高值  等比例缩放
if (tW > showMaxWidth) {
    var rate = tW / showMaxWidth;
    tW /= rate;
    tH /= rate;
}
if (tH > showMaxHeight) {
    var rate = tH / showMaxHeight;
    tW /= rate;
    tH /= rate;
}
//缩略图必须设置其宽高
showDiv.style.width = tW + "px";  
showDiv.style.height = tH + "px"; 
showDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
showDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc ;
document.selection.empty();  
$("#img_show").hide(); 
$("#tmpImg").remove();

HTML：

<div id= "choseImg" >图片：
    id="img_btn"   for="call_img">
        选择图片
    
div>
<div style="bacbackground-color:#ffffff;opacity:0;">
    "width: 1px;height: 1px;" id="call_img" type="file" />
div>