Heim >Web-Frontend >HTML-Tutorial >各版本浏览器兼容实现本地图片预览_html/css_WEB-ITnose

各版本浏览器兼容实现本地图片预览_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:05:121207Durchsuche

1.IE浏览器

   6: 直接获取inputFile对象的value 填充到img 标签的src 中
       7++: 由于浏览器安全限制 直接使用绝对路径已经不能显示图片了. 需要AlphaImageLoader 滤镜技巧 (IE特有 )
          filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
        贴一个滤镜使用讲解的blog
               http://hi.baidu.com/zygalcn/item/6f9946b8900c33d385dd79e6
               http://www.cnblogs.com/JustinYoung/articles/Microsoft-AlphaImageLoader.html
        上代码比较实际:
          var imageUrl = document.selection.createRange().text;
          document.selection.empty();
          inputFile.src="http://qzs.qq.com/ac/b.gif")
          img.src = "http://qzs.qq.com/ac/b.gif";
          img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='"+ imageUrl +"')";

2 现代浏览器

  chrome  

  检测浏览器是否支持FileReader对象
               FileReaer.result 返回文件 content 
               var reader = new FileReader();
               reader.readAsDataURL(self.inputFile.files[0]);
               reader.onload = function(evt){img.src = evt.target.result;

   FF 
          inputFile.files.item(0).gettAsDataURL(); // FF 下支持. 具体支持到什么版本没

 

都是些代码片段.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn