最近在做項目時需要用到圖片上傳，並且要轉成base64進行預覽，所以就寫個小案例，話不多說先上代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input id="file" type="file" onchange="imgChange(this)" accept="image/*" /> <img width="300" height="300" src=""> <script type="text/javascript"> function imgChange(obj) { var image = obj.files[0]; //獲取文件域中選中的圖片 var reader = new FileReader(); //實例化文件讀取對象 reader.readAsDataURL(image); //將文件讀取為 DataURL,也就是base64編碼 reader.onload = function(ev) { //文件讀取成功完成時觸發 var dataURL = ev.target.result; //獲得文件讀取成功后的DataURL,也就是base64編碼 document.querySelector("img").src = dataURL; //將DataURL碼賦值給img標簽 console.log(dataURL); } console.log(image); } </script> </body> </html>
以上代碼實現的效果圖：
圖1、
圖2、
通過圖2就可以看到已經拿到了我們所有想要的東西。
注：本博客為個人學習筆記，大牛繞路。