关于上传图片预览
常常会遇到长传图片时怎么只有图片名却看不见图片的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#preview,img{
width:300px;
height:300px;
}
#preview{
border:1px solid #000;
}
#h{
position: relative;
width: 300px;
height: 300px;
top: -300px;
opacity: 0;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" id="h" accept="image/*">
<script type="text/javascript">
var addEvent=function(elem,type,handler){
if(window.addEventListener){
addEvent=function(elem,type,handler){
elem.addEventListener(type,handler,false);
}
}
else if(window.attachEvent){
addEvent=function(elem,type,handler){
elem.attachEvent('on'+type,handler);
}
}
addEvent(elem,type,handler);
};
var h=document.getElementById('h');
var prevDiv=document.getElementById("preview");
addEvent(h,'change',function(event){
event=event||window.event;
var file=event.target;
if (file.files && file.files[0]){
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
}
})
</script>
</body>
</html>
简单的来说就是将input放大到和前一个div一样大小,然后将input移到前面的div中,将input的透明度设为0。