兼容IE6,IE7的图片预览 firefox chrome

最新推荐文章于 2021-06-07 12:02:47 发布

原创最新推荐文章于 2021-06-07 12:02:47 发布 · 109 阅读

CC 4.0 BY-SA版权

本文介绍了一种在不同浏览器中实现图片预览的方法。对于IE6-IE8使用了ActiveX技术实现预览效果，而对于现代浏览器如Firefox和Chrome，则利用了HTML5的FileReader API。通过这种方式，开发者可以轻松地在网页上展示用户上传的图片预览。

IE6, IE7

<html>
<body>
<script type="text/javascript" language="javascript">

</script>

IE6,IE7,IE8图片预览在页面中加入如下代码：

<div id="newPreview"></div>
<div id="showPicUrl"></div>
<hr />
<p>
选择图片：<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
</p>
</body>
</html>

firefox, chrome浏览器

 var pre_pic_id ="#div134";
  FileReader = window.FileReader;
   if (FileReader) {  
     //FF chrome预览
       var reader = new FileReader(),  
           file = obj.files[0];  
       reader.onload = function(e) {  
           $(pre_pic_id).html("");
           $(pre_pic_id).append('<img width="120" height="100" src="http://qingfengxia2.blog.163.com/blog/' +e.target.result+ '">');
       };  
       reader.readAsDataURL(file);  
   }