html5上傳頭像
阿新 • • 發佈：2018-12-02
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5上傳頭像</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') { //result.innerHTML = "抱歉，你的瀏覽器不支援 FileReader"; input1.setAttribute('disabled', 'disabled'); } else { input1.addEventListener('change', readFile, false); } function readFile() { var file = this.files[0]; //獲取上傳檔案列表中第一個檔案 if(!/image\/\w+/.test(file.type)) { //圖片檔案的type值為image/png或image/jpg alert("檔案必須為圖片！"); return false; } // console.log(file); var reader = new FileReader(); //例項一個檔案物件 reader.readAsDataURL(file); //把上傳的檔案轉換成url //當檔案讀取成功便可以調取上傳的介面 reader.onload = function(e) { var image = new Image(); // 設定src屬性 image.src = e.target.result; var max = 200; // 繫結load事件處理器，載入完成後執行，避免同步問題 image.onload = function() { // 獲取 canvas DOM 物件 var canvas = document.getElementById("cvs"); // 獲取 canvas的 2d 環境物件, var ctx = canvas.getContext("2d"); // canvas清屏 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0, 200, 200); }; } }; </script> </body> </html>
參考連結：https://blog.csdn.net/AVGworkld/article/details/53020402