IE8下图片上传并显示_ie8 图片上传,页面显示-CSDN博客

在IE8下上传图片并进行显示时，发现始终无法给Img的src进行赋值，查找资料后发现：IE下给Img的src赋值必须把img放入div中。
IE8.0 显示本地图片 img.src=本地图片路径 是无效，只能通过div来完成 。 IE7,IE8是放在 <div id="imgPreview"></div>里的。 FIREFOX是可以直接设置<img id="img1"/>里的图片。
参考文章为：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

经修改，如下代码兼容谷歌、火狐、360，IE8等浏览器。
另外，在开发过程中，发现IE8仅能支持低版本的jquery，所以在引入jquery时也要注意jquery的版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
      <script type="text/javascript" src="../../libs/quickui/js/jquery.js"></script>
      <link href="../../libs/quickui/css/import_basic.css" rel="stylesheet" type="text/css"/>
      <link rel="stylesheet" href="../../libs/css/common.css">
  </head>

<body >
    <div class="con-person-img" id="imgPreview">
        <img src="" id="ImgPr">
    </div>
    <input type="file" name="picture" id="up" οnchange='PreviewImage(this)'>
</body>
</html>
<script>

    function PreviewImage(imgFile) {
        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 {
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#ImgPr");
            var file =  imgFile.files[0];
            if(file){
                dataURL = windowURL.createObjectURL(file);
                $img.attr('src',dataURL);
            }
        }
    }
</script>


</body>
</html>