<!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>
效果圖：
未傳圖片之前
上傳圖片之后
