JavaScript文件轉成base64編碼

時間 2019-11-11

標籤 javascript 文件轉成 base64 base 編碼欄目 JavaScript 简体版

原文原文鏈接

最近在作項目時須要用到圖片上傳，而且要轉成base64進行預覽，因此就寫個小案例，話很少說先上代碼：javascript

<!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>