兼容低版本浏览器的图片选择预览方案

最新推荐文章于 2025-12-02 21:41:05 发布

转载最新推荐文章于 2025-12-02 21:41:05 发布 · 536 阅读

文章标签：

#前端 #图片预览 #兼容性 #低版本浏览器

网页开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种兼容新旧浏览器的本地图片预览方法，利用FileReader API实现现代浏览器的图片预览，并提供IE10以下版本的解决方案。

众所周知，低版本的浏览器在预览本地图片的问题上表现的差强人意，低版本浏览器并不支持FileReader对象。

<div id="picArea"></div>    //图片展示区域
<input type="file" onchange="preview(this)" />   //文件选择框

#picArea , .img,img {
    width: 200px;
    height: 200px;
  }
  #picArea{
    border: 1px solid #000;
  }

function preview(inputObj) {
    var prevDiv = document.getElementById('picArea');
    if (inputObj.files && inputObj.files[0]) {   //判断是否支持新的API
      var reader = new FileReader();
      reader.onload = function(evt) {
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(inputObj.files[0]);
    } else {  //IE10以下版本解决方案
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + inputObj.value + '\'"></div>';
    }
  }