如何將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