当前位置: 代码迷 >> JavaScript >> 有点小揪心,IE和chrome上预浏览图片有关问题
  详细解决方案

有点小揪心,IE和chrome上预浏览图片有关问题

热度:443   发布时间:2013-12-04 17:21:01.0
有点小揪心,IE和chrome上预浏览图片问题。
 function display(x){
      document.getElementById('p').style.display = x;
   }
   function pric(){
  var p = document.getElementById('file');
     p.click();
    document.getElementById('img').src = p.value;
   }

<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
<div class="c">
     <input style="display:none;" id="file" type="file" />
  <img id="img" width="100" height="100" />
  </div>
    <div class="b">
     <a href="#" onclick="display('none')">上传</a>
        <a href="#" onclick="pric()">预览</a>
    </div>
</div>
</div>
</center>

怎么解决这个问题,目前我没有用到jquery    在IE上 点击浏览,图片可以显示,
在chrome 上点击浏览,图片 预览不到。。。。如何解决呢

------解决方案--------------------
安全问题不允许显示本地图片,兼容性最好的办法就是上传到服务器后返回临时文件名来实现预览

IE发布网站后除了ie6,ie7+也加载不了本地图片实现预览的
------解决方案--------------------
既然ie通过安全漏洞解决了,那其他的就好办了

html5有file api,chrome完美支持


<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

    function PreviewImage() {
        oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>

------解决方案--------------------
本地图片,用户在选择图片时,操作系统就可以预览。完全没必要预览本地图片。

先上传到服务器,显示上传后的 服务器上面的图片
------解决方案--------------------
显示本地图片?那你的所谓ie显示应该也是ie的低版本吧?浏览器安全性提高以后,不允许显示本地图片了,所以要么是flash,或者sl。。。
------解决方案--------------------
按照5#的改了下,测试了设置file控件透明覆盖在预览上兼容好,不要使用file.click(),要不firefox下报错。safari不行,需要上传,不支持FileReader。。

<script>
    //使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确
    if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true<\/script><![endif]-->');
// var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8
    function change(file,pic) {
if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
   oFReader = new FileReader();
           oFReader.readAsDataURL(file.files[0]);
           oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};
}
else if (document.all) {//IE8-
            file.select();
            var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
            if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
            else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
                pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片,要不会显示红xx
  相关解决方案