js 上传头像
css
.con4{width: 230px;height: auto;overflow: hidden;margin: 20px auto;color: #FFFFFF;} .con4 .btn{width: 100%;height: 45px;line-height: 30px;text-align: center;background: #d8b49c;display: block;font-size: 16px;border-radius: 5px;} .upload{float: left;position: relative;margin-bottom: 30px;} .upload_pic{display: block;width: 100%;height: 40px;position: absolute;left: 0;top: 0;opacity: 0;border-radius: 5px;} #cvs{border: 1px solid #000;margin:20px 0 20px 50px auto;border-radius: 50%;}
HTML
<div class="con4"> <span class="btn upload">上传头像 <input type="file" class="upload_pic" id="upload" /> </span> <canvas id="cvs" width="100%" height="100%"> </canvas> </div>
js
var input1 = document.getElementById("upload"); if(typeof FileReader==='undefined'){ input1.setAttribute('disabled','disabled'); }else{ input1.addEventListener('change',function () { var file = this.files[0]; if(!/image\/\w+/.test(file.type)){ alert("文件必须为图片!"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var image = new Image(); image.src = e.target.result; var max=200; image.onload = function(){ var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0, 200, 200); }; } },false); }