概述:在ie9下实现图片预览效果
1 HTML代码
<li class="clearFix upLoadPic" id="upLoadPic">
<label class="fl">上传图片:</label>
<input id="uploadLocalPic" type="file" class="fl" onchange="previewPic()" name=
"multipartfile"/>
</li>
<%--预览图片--%>
<div id="previewArea" style="384px;height: 224px;margin-top:15px;display: none" >
<img id="browerPicture" style="100%"/>
</div>
2 js代码
function previewPic(){
var pic = document.getElementById("browerPicture"),
file = document.getElementById("uploadLocalPic");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
// gif在IE浏览器暂时无法显示
if(ext!='bmp'){
top.artDialog.alert("图片的格式必须为bmp格式!");
return;
}
var isIE = navigator.userAgent.match(/MSIE/)!= null; //ie版本
$("#previewArea").show();
document.getElementById("browerPicture").src="";
if(isIE) { //ie9
file.select();
//让其他的div获取到焦点,这样就解决了document.selection.createRange().text拒绝访问的问题
document.getElementById("previewArea").focus();
var reallocalpath = document.selection.createRange().text;
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
pic.style.width = "384px";
pic.style.height = "224px"
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/bmp;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}else { //ie11,谷歌
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function(e){
var pic = document.getElementById("browerPicture");
pic.src=this.result;
}
}
};