本地上传图片预览并兼容到IE8

最新推荐文章于 2021-01-17 17:05:35 发布

SuperCookies

最新推荐文章于 2021-01-17 17:05:35 发布

阅读量297

点赞数 2

分类专栏：兼容

本文链接：https://blog.csdn.net/SuperCookies/article/details/105583364

版权

兼容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本地上传图片预览并兼容到IE8

一、HTML代码

我是结合easyui-filebox;

<form id="sealDetailForm" class="easyui-form" method="post" >
	<span class="querytitle">印章图片:</span>
	<div id="sealImgDiv" >
		<input id="sealImgFile" name="sealImgFile" class="easyui-filebox"
		data-options="editable:false,buttonText:'选择',width:220,onChange:onChangeImg,accept:'image/gif'"/>
	</div>
		//所以添加个div，为了转移焦点
	<div id="picDiv" style="width: 1px; height: 1px;"></div>
	<div id="imgtd">
		<img id="image" alt="" src="" style="margin: 0 auto;width:150px;">
	</div>
</form>

二、JS代码

function onChangeImg(newValue, oldValue){
	var isIE = navigator.userAgent.match(/MSIE/)!= null;
	var isIE10 = navigator.userAgent.match(/MSIE 10.0/)!= null;
	var f = $(this).next().find('input[type=file]')[0];
	if(isIE && !isIE10){  //**IE9及IE8**
		var file=$(f);
		file.select();
		//file.focus();//IE8失去焦点 type=file 获得的 document.selection.createRange().text为空
		//所以添加个div，转移焦点
		var div = document.getElementById("picDiv"); 
		div.focus();
		var nfile = document.selection.createRange().text;
        $("#image").css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+nfile+"')");
		$("#image").removeAttr("src");//去掉默认url
	}else{//IE10及以上及其他主流浏览器
		if (f.files && f.files[0]){
			var reader = new FileReader();//该方法不兼容IE10以下
		    reader.onload = function(e){
		        $("#image").attr('src', e.target.result);
		    }
		    reader.readAsDataURL(f.files[0]);
		}
	}
}

三、关于 document.selection.createRange() 拒绝访问的问题

1、修复方法如下：
在报错位置前一行添加: file.blur();
在file控件下获取焦点情况下 document.selection.createRange() 将会拒绝访问，所以我们要失去下焦点；但是会出现新的问题：E8失去焦点 type=file 获得的 document.selection.createRange().text为空；
新修改方法：
所以添加个div，转移焦点
html中：

js的change方法中： var div = document.getElementById("picDiv"); div.focus();