<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul,li{
list-style: none;
}
.fileinput1{
display: none;
}
.filethis{
background: #1aad19;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
cursor: pointer;
display: inline-block;
}
#imgfs img{
width: 100px;
height: 100px;
display: inline-block;
}
#imgfs{
display: inline-block;
}
</style>
</head>
<body>
<div id="big">
<label class="filethis">上传文件
<input type="file" name="" accept="image/*" multiple class="fileinput1" id="file">
</label>
</div>
</body>
</html>
<script type="text/javascript">
(function(){ //querySelector
var file=document.querySelector("#file");
var big= document.querySelector("#big")
var sizeMax=10*1024*1024
file.onchange=function(){
console.log(this.files[0].size);
if(this.files[0].size>sizeMax){
alert("你上传的文件过大");
return false;
};
var op=document.createElement('div');
op.id="imgfs";
big.appendChild(op);
var reader=new FileReader();
reader.onload=function(e){
var img=new Image();
img.src=e.target.result;
console.log(img,1);
img.onload=function(){
op.appendChild(img);
}
}
reader.readAsDataURL(this.files[0]);//把文件读取成dataURI
}
})()
</script>
