js如何將選中圖片檔案轉換成Base64字串?

weixin_34120274發表於2018-09-13
JS字串

如何將input type="file"選中的檔案轉換成Base64的字串呢？

1、首先了解一下為什麼要把圖片檔案轉換成Base64的字串

    在常規的web開發過程中，大部分上傳檔案都是在web頁面端通過表單直接提交，再由伺服器端捕獲請求來進行處理的。但是在前後端分離趨於一種流行趨勢，再加上Android和iOS開發技術日漸成熟，

大部分團隊都會選擇在伺服器端僅提供一套通用的webservice資料介面，而web頁面、Android和iOS統一都通過這套資料介面來向伺服器傳送請求和獲取資料。

在這一過程中，大部分的webservice資料介面都會採用xml資料格式或是json資料格式來進行資料請求和處理，在這種情況下，其實來自客戶端的請求就可以看作是一個字串（無論是xml還是json資料）。

此時，常規的資料提交完全不存在任何問題，但是附件上傳就需要特殊處理了。（摘自：https://blog.csdn.net/freezingxu/article/details/77922367）

2、如何將圖片檔案轉換成Base64字串

首先在新增一個html檔案，有如下標籤

<h2>選擇圖片：</h2>
<input id="chkFile" type="file" onchange="previewFile()"><br/>
<img id="showImg" src=""  height="200" alt="圖片 預覽..."> <br/>
<h2>轉換結果：</h2>
<textarea id="showText" style="width:400px;height:300px;"></textarea>

js指令碼方法，如下

<script>
      function previewFile() {
        //獲取顯示圖片物件
        var preview = document.getElementById("showImg");   // 通過元素節點查詢： document.querySelector('img');
        //獲取選中圖片物件（包含檔案的名稱、大小、型別等，如file.size）
        var file = document.getElementById("chkFile").files[0];   //document.querySelector('input[type=file]').files[0];
        //宣告js的檔案流
        var reader = new FileReader();
        if(file){
            //通過檔案流將檔案轉換成Base64字串
            reader.readAsDataURL(file);
            //轉換成功後
            reader.onloadend = function () 
            {
                //將轉換結果賦值給img標籤
                preview.src = reader.result;
                //輸出結果    
                console.log(reader.result); 
                document.getElementById("showText").value = reader.result;
            }
        }
        else{
            preview.src = "";
        }                
    }
      
</script>

3、整體demo例子

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>js如何將選中檔案轉換成Base64字串</title>
</head>
<body>
<script>
      function previewFile() {
        //獲取顯示圖片物件
        var preview = document.getElementById("showImg");   // 通過元素節點查詢： document.querySelector('img');
        //獲取選中圖片物件（包含檔案的名稱、大小、型別等，如file.size）
        var file = document.getElementById("chkFile").files[0];   //document.querySelector('input[type=file]').files[0];
        //宣告js的檔案流
        var reader = new FileReader();
        if(file){
            //通過檔案流將檔案轉換成Base64字串
            reader.readAsDataURL(file);
            //轉換成功後
            reader.onloadend = function () 
            {
                //將轉換結果賦值給img標籤
                preview.src = reader.result;
                //輸出結果    
                console.log(reader.result); 
                document.getElementById("showText").value = reader.result;
            }
        }
        else{
            preview.src = "";
        }                
    }
      
</script>

<h2>選擇圖片：</h2>
<input id="chkFile" type="file" onchange="previewFile()"><br/>
<img id="showImg" src=""  height="200" alt="圖片 預覽..."> <br/>
<h2>轉換結果：</h2>
<textarea id="showText" style="width:400px;height:300px;"></textarea>
</body>
</html>

4、演示效果圖

1）效果圖1

 2）效果圖2

5、測試轉換後字串是否可用

在線上轉換Base64的網站測試，http://imgbase64.duoshitong.com/，可在上面生成和還原

 

6、demo下載地址：https://pan.baidu.com/s/1FBK-yclGaSscqh_jDGvrUw

參考demo來源於：http://blog.okbase.net/jquery2000/archive/1295.html

 

相關文章