js-上传头像

HTML:

<div class="echo" id='dd'><input class="up" type="file" id="inputs"/> </div>
<div class="upwarp"> 上传头像</div>

CSS:

.upwarp{
width:64px;
height:16px;
font-size:16px;
font-family:Source Han Sans SC;
font-weight:300;
color:rgba(166,166,166,1);
position: relative;
}

.echo{
width: 67px;
height: 76px;
background:url(pic/lb2.png) no-repeat ;
}
img{
width: 67px;
height: 76px;
}
.up{
opacity: 0;
width: 67px;
height: 76px;
position: absolute;
left: 0;
top:0px;
}

 

js:

$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML = "<img src='"+reader.result+"'>";//+=如果是多个照片的话
};
}