#preview{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="/UploadFiles/2021-04-02/dummy.png">

 （3）. JS中的使用方式


var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="/UploadFiles/2021-04-02/dummy1.png">

（4）. 属性
enabled：可选项，设置滤镜是否激活。值范围true(默认)，false
sizingMethod：可选项，设置滤镜作用的图片在容器边界内的显示方式，值范围crop（剪切图片以适应容器尺寸），image（默认值，增大或缩小容器尺寸以适应图片的尺寸），scale（缩放图片以适应容器尺寸）
src：必填项，使用绝对或相对URL指向背景图片。当URL为用户计算机本地地址时有效, 而img元素的src为用户计算机本地地址时会抛不允许访问本地文件系统的异常。
 三、实现　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
接下来我们就利用FileReader的readAsDataURL来获取Data URI Scheme来实现图片预览的功能，而IE5.5~9我们就使用滤镜DXImageTransform.Microsoft.AlphaImageLoader来作降级处理。
html片断：


<style type="text/css">
#preview{
  width: 100px;
  height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
  #preview{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>




js片断：




var preview = function(el){
  var pv = document.getElementById("preview");
  // IE5.5~9使用滤镜
  if (pv.filters && typeof(pv.filters.item) === 'function'){
    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
  }
  else{
    // 其他浏览器和IE10+（不支持滤镜）则使用FileReader
    var fr = new FileReader();
    fr.onload = function(evt){
      var pvImg = new Image();
      pvImg.style.width = pv.offsetWidth + 'px';
      pvImg.style.height = pv.offsetHeight + 'px';
      pvImg.src = evt.target.result;
      pv.removeChild(0);
      pv.appendChild(pvImg);
    };
    fr.readAsDataURL(el.files[0]);
  }
};



四、坑　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
   由于IE11作了安全方面的考虑，使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址，只能获取到 C:\fakepath\文件名称 。因此假如使用IE11,但文本模式却设置为10以下，那就没木有办法实现图片预览了。
解决办法1──在head标签下加入这句： <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 。这样就可以告诉IE，默认使用当前IE的最高版本解析、渲染网页了。
解决办法2──采用 document.selection.createRangeColleciton() 获取真实地址，具体操作如下：


// 假设fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText; 




五、补充：使用window.URL.createObjectURL代替FileReader　　　　　　  
  通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串，若图片较大那么字符串则更长，若页面出现reflow时则会导致性能下降。解决方案如下：
  1. 预览的img标签使用绝对定位，从而脱离正常文档流，那么就与文档的其他元素无关了，而reflow时则不会影响性能。
  2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。


var createObjectURL = function(blob){
 return window[window.webkitURL "color: #800000">注意： window.URL.createObjectURL 生成的数据链接是独占内存的，因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时，也会自动释放内容。



var resolveObjectURL = function(blob){
 window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};



以上就是本文的全部内容，希望对大家的学习有所帮助。

                                
                                

                                    js,图片预览 
                                
DDR爱好者之家 Design By 杰米