图片直接预览,不需要按按钮。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>laia</title>
<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 type="text/javascript">
var input1=document.getElementById("upload");
if(typeof FileReader==='undefined'){
input1.setAttribute('disabled','disabled');
}else{
input1.addEventListener('change',readFile,false);
}
function readFile(){
var file=this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片!");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.οnlοad=function(e){
var image=new Image();
image.src=e.target.result;
var max=200;
image.οnlοad=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);
};
};
};
</script>
</body>
</html>