ie8.0 显示本地图片 js处理 img.src

最新推荐文章于 2017-01-05 18:39:26 发布

weixin_30808575

最新推荐文章于 2017-01-05 18:39:26 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/zouzhiBlog/archive/2012/12/13/js%e5%9c%a8%e9%a1%b5%e9%9d%a2%e4%b8%8a%e5%8a%a0%e8%bd%bd%e6%9c%ac%e5%9c%b0%e5%9b%be%e7%89%87.html

版权

IE8.0 显示本地图片 img.src=本地图片路径 是无效，只能通过div来完成 。
 
IE7,IE8是放在 <div id="imgPreview"></div>里的。
 
  FIREFOX是可以直接设置<img id="img1"/>里的图片。
 
<html>
 <head>
 <title>js图片上传预览</title>
 <script>
 function PreviewImage(imgFile)
 {
   var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
   filextension=filextension.toLowerCase();
   if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
   {
   alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
   imgFile.focus();
   }
   else
   {
   var path;
   if(document.all)//IE
   {
   imgFile.select();
   path = document.selection.createRange().text;
   document.getElementById("imgPreview").innerHTML="";
   document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果www.2cto.com  
   }
   else//FF
   {
   path = imgFile.files[0].getAsDataURL();
   //document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
    document.getElementById("img1").src = path;
   }
   }
 }
 </script>
 </head>
 <body>
 <input type="file" οnchange='PreviewImage(this)' />
 <br />
 <div id="imgPreview" style='width:120px; height:100px;'>
   <img id="img1" src="" width="120" height="100" />
 </div>
 </body>
 </html>

转载于:https://www.cnblogs.com/zouzhiBlog/archive/2012/12/13/js%e5%9c%a8%e9%a1%b5%e9%9d%a2%e4%b8%8a%e5%8a%a0%e8%bd%bd%e6%9c%ac%e5%9c%b0%e5%9b%be%e7%89%87.html

weixin_30808575

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie8.0 显示本地图片 js处理 img.src

IE8.0 显示本地图片 img.src=本地图片路径是无效，只能通过div来完成。 IE7,IE8是放在 <div id="imgPreview"></div>里的。 FIREFOX是可以直接设置<img id="img1"/>里的图片。 <html> <head> <title>...
复制链接

扫一扫