上传图片实时显示 兼容 ie11

Posted 输入密码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上传图片实时显示 兼容 ie11相关的知识,希望对你有一定的参考价值。

html:

<style type="text/css">
  .imgOnloadWrap{ width: 150px; height: 200px;}
  #img1{ width: 150px; height: 200px;}
</style>

<div class="imgOnloadWrap">

  <img id="img1" name="fileimage"  src="<c:url value=‘/${bean.fileUrl }‘ />" />

</div>  

 <input type="file" style="width:10px;" size="1" class="btn_add_pic" id="file" name="file" onchange="upImg(this)" />  

 

 

js:

  

function upImg(obj){
  var $file = obj;

  注:这种方式ie11不兼容   var imgFile = obj.files[0];

  替换成:var fileObj = $file[0]; 
  var fileObj = $file[0];
  var windowURL = window.URL || window.webkitURL;
  var dataURL;
  var $img = $("#img1");
  if(fileObj && fileObj.files && fileObj.files[0]){
    dataURL = windowURL.createObjectURL(fileObj.files[0]);
    $img.attr(‘src‘,dataURL);
  }else{
    $(‘.imgOnloadWrap img‘).remove();
    var htmlStr = ‘‘;
    htmlStr += ‘<img id="img1" src=""/>‘;
    $(‘.imgOnloadWrap‘).append(htmlStr);
    dataURL = $file.value;
    var imgObj = document.getElementById("img1");
    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

  }
}

以上是关于上传图片实时显示 兼容 ie11的主要内容,如果未能解决你的问题,请参考以下文章

前端图片预览,上传前预览,兼容IE7891011,Firefox,Chrome

JS兼容各个浏览器的本地图片上传即时预览效果

thinkPHP利用ajax异步上传图片并显示删除

TP利用ajax异步上传图片并显示删除

JavaScript 图片的上传前预览(兼容所有浏览器)

解决图片上传的浏览器兼容问题