html5 把 file文件轉成base64字符，base64字符轉成blob對象案例（適用於多種類型文件）

時間 2019-11-09

標籤 html5 html file 文件轉成 base64 base 字符 blob 對象案例適用於多種類型欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <div>
        <h4>file 文件轉成 base64 字符</h4>
        <input type="file" id="file"/>
        <img src="" id="portrait" style="width:100px; height:100px; display: block;" />
        <textarea id="base64Textarea" cols="30" rows="10" placeholder="base64信息輸出"></textarea>
    </div>
    
    <br>
    <br>
    <br>

    <div>
        <h4>base64 字符轉成 blob對象</h4>
        <button id="toBlob">點擊轉成blob對象</button>
        <p>假如是隻有base64字符，那麼轉成blob對象會方便於上傳到七牛</p>
    </div>

<script>

var base64Data = '';
var blob = null;

document.getElementById('file').onchange=function(e){
    var file = e.target.files[0];
    if(window.FileReader) {
         var fr = new FileReader();
          fr.readAsDataURL(file);
          fr.onloadend = function(e) {
              base64Data = e.target.result;
              document.getElementById('portrait').src = base64Data;
              document.getElementById('base64Textarea').value = base64Data;
          }
    }
}

//轉成blob對象第一種方式
function dataURLtoBlob(dataurl) {
     var arr = dataurl.split(','), 
         mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

        while(n--){
           u8arr[n] = bstr.charCodeAt(n);
        }
          return new Blob([u8arr], {type:mime});
}

document.getElementById('toBlob').onclick=function(){
    if ( base64Data ) {
        blob = dataURLtoBlob(base64Data);
        console.log(blob);

        alert('已轉成blob對象，請查看瀏覽器 console');
    }else{
        alert('你還沒生成base64文件');
    }
}    
    

</script>
</body>
</html>