<pre name="code" class="html"><div class="item_content">
<label for="">头像:</label>
<input type="file" id="face" name="myfile" placeholder="上传头像">
<img src="" alt="" id="preface">
</div>
//点击上传头像即可实现头像预览
document.querySelector('#face').onchange = function (evt) {
var file = this.files[0];
var type = file.type.split('/')[1];
if(type != 'jpg' && type != 'jpeg' && type != 'png' && type != 'gif'){
myalert('上传头像格式必须为jpg,png或gif!');
//$('#preface').attr('src','/images/head.png');
return;
}
if(file.size > 2097152){
myalert('头像大小不得超过2M,请重新上传');
//$('#preface').attr('src','/images/head.png');
return;
}
var files = evt.target.files;
for(var i = 0, f; f = files[i]; i++){
if(!f.type.match('image.*')) continue;
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var img = document.createElement('img');
img.title = theFile.name;
img.src = e.target.result;
//document.body.appendChild(img); //这里你想插哪插哪
//$('#face').appendChild(img);
$('#preface').attr('src',img.src);
$('#preface').css({'width':'76px','height':'76px'});
}
})(f);
reader.readAsDataURL(f);
}
}