最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome,FF,IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候ie9-老是显示不了图片。我以为是方法出现问题。于是找度娘,找谷歌;几乎都是这样实现的。搞了好久,都不知哪出问题了。最后才发现是测试的出现问题。我用IE-test来测试,还有IE11的仿真,其实这些都是不准确的。如果真的想测试在IE系列的效果,最好就对应版本的IE浏览器。这个可以用虚拟机实现,也可以用browserstack。一个很牛的云端虚拟机,几乎集成了所有的系统跟浏览器,不好的一点就是要钱。也对,那么好的东西不要钱就没天理了
下面附上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传预览演示-柯乐义</title>
<style>
.img-container{
width: 293px;
height: 150px;
background:#F2F2F2;
margin-bottom:35px;
overflow: hidden;
border: 1px solid #000;
}
.img-container>img{
width: 293px;
height: 150px;
}
.img{
width: 293px;
height: 150px;
}
</style>
</head>
<body>
<form name="/" class="card-form">
<div>
<div class="img-container"></div>
<input class="img-btn" type="file" id="drivingLicence" name="drivingLicence">
</div>
</form>
<script>
/**
* Created by Administrator on 2016/4/28.
*/
//上传图片并预览
function previewImg(fileInput,imgDiv){
if(window.FileReader){//支持FileReader的时候
var reader=new FileReader();
reader.readAsDataURL(fileInput.files[0]);
reader.onload=function(evt){
imgDiv.innerHTML="\<img src="+evt.target.result+"\>";
}
}else{//兼容ie9-
imgDiv.innerHTML='<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + fileInput.value + '\)\';"></div>';
}
}
function selectImg(fileInputs,imgDivs){
var checkImg=new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)","i");
var i=0;
for(;i<fileInputs.length&&i<imgDivs.length;i++){
(function(i){//立即执行函数;保存i
fileInputs[i].onchange=function(){
if(checkImg.test(fileInputs[i].value)){
previewImg(this,imgDivs[i]);
}else{
alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
}
};
})(i);
}
}
/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE=parseInt(RegExp.$1?RegExp.$1:0);
if(isIE>0&&isIE<9){
document.getElementsByClassName=function(cls){
var els=this.getElementsByTagName('*');
var ell=els.length;
var elements=[];
for(var n=0;n<ell;n++){
var oCls=els[n].className||'';
if(oCls.indexOf(cls)<0) continue;
oCls=oCls.split(/\s+/);
var oCll=oCls.length;
for(var j=0;j<oCll;j++){
if(cls==oCls[j]){
elements.push(els[n]);
break;
}
}
}
return elements;
}
}
var fileInputs=document.getElementsByClassName("img-btn");//文件选择按钮
var imgDivs=document.getElementsByClassName("img-container");//图片容器
selectImg(fileInputs,imgDivs);
</script>
</body>
</html>