众所周知,低版本的浏览器在预览本地图片的问题上表现的差强人意,低版本浏览器并不支持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>';
}
}