<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css"> .con4{ width: 300px; height: auto; overflow: hidden; margin: 20px auto; color: #FFFFFF;
} .con4 .btn{ width: 100%; height: 40px; line-height: 40px; text-align: center; background: #d8b49c; display: block; font-size: 16px; border-radius: 5px;
} .upload{ float: left; position: relative;
} .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;
}
</style>
</head>
<body>
<div class="con4">
<canvas id="cvs" width="200" height="200"></canvas>
<span class="btn upload">上传头像<input type="file" class="upload_pic" id="upload" /></span>
</div>
<script>
var input1 = document.getElementById("upload"); if(typeof FileReader==='undefined'){ alert("抱歉，你的浏览器不支持 FileReader"); input1.setAttribute('disabled','disabled'); }else{ // console.log(typeof FileReader);
input1.addEventListener('change',readFile,false); /*input1.addEventListener('change',function (e){ // console.log(e.target.files[0]); console.log(this.files[0]); },false); */ } function readFile(){ var file = this.files[0];//获取上传文件列表中第一个文件
// console.log(file);
if(!/image\/\w+/.test(file.type)){ //图片文件的type值为image/png或image/jpg
alert("文件必须为图片！"); return false; //结束进程
} var reader = new FileReader();//实例一个文件对象
// console.log(reader);
reader.readAsDataURL(file);//把上传的文件转换成url
//当文件读取成功便可以调取上传的接口
reader.onload = function(e){ var image = new Image(); // 设置src属性
// image.src = e.target.result;
image.src = this.result; // 绑定load事件，加载完成后执行，避免同步问题
image.onload = function(){ var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); // canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0, 200, 200); }; } }; </script>
</body>
</html>
效果图：
未传图片之前
上传图片之后
