將input type="file" 型別的圖片檔案轉成base64

帶有圖片的form表單上傳資料是很麻煩的，因為圖片通常都是和文字分開上傳，這是很麻煩的，所有吧圖片轉成base64就可以和當成文字上傳了。話不多少，看程式碼：

首先定義一個型別為file的input標籤還要定義一個onchange事件，並傳入一個event引數。

 

<div>
    <input type="file" id="imgTest" type="file" onchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
</div>
<img src="" id="showImage" alt="">

 

 

在這個onchange事件方法中會接收一個event引數，我們可以在這個引數中拿到這個input的標籤物件還可以拿到這個檔案。

 

function imgChange(e) {
    console.info(e.target.files[0]);//圖片檔案
    var dom =$("input[id^='imgTest']")[0];
    console.info(dom.value);//這個是檔案的路徑 C:\fakepath\icon (5).png
    console.log(e.target.value);//這個也是檔案的路徑和上面的dom.value是一樣的
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (e) {
           console.info(this.result); //這個就是base64的資料了
            var sss=$("#showImage");
            $("#showImage")[0].src=this.result;
        };
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);

}

 

 

擴充 ： 把頁面中的圖片變成base64的資料

 

 

<!--這裡先搞上一張圖片-->
<img id="img" src="/img/my.jpg" alt="" style="width: 150px;height: 150px">

<input type="button" onclick="imgChaneBase64()" value="img標籤繪製到canvas" /><br />
<!--引入html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
    function imgChaneBase64() {
        //將要變成base64的圖片的html標籤當引數傳進來，這裡如果將document傳進來，就會將整個頁面變成圖片，在then中會返回一個canvas
        html2canvas(document.getElementById("img")).then(function(canvas) {
            console.info(canvas);
            var imgData = canvas.toDataURL("image/png"); //這裡會將canvas轉化為base64的資料
            document.body.appendChild(canvas); //頁面滑鼠右擊這個標籤時會提示儲存圖片，儲存之後會以png格式儲存

        });
    }
</script>

這裡要注意的是這種方法其實利用的是截圖的原理，將html內容變成base64的，所有其實不是真的將這個圖片變成base64。