แปลง Upload File เป็น Base64 โดยใช้ JavaScript

| JavaScript | 65 | 53 วันที่แล้ว
สวัสดีคับ บทความนี้ผมมาแชร์โค้ด การแปลง File เป็น Base64 โดยใช้ JavaScript คับ

ซึ่งมีหลายครั้งที่เราอาจจะต้องได้ทำการแปลงไฟล์ ที่จะทำการอัพโหลด แล้วแปลงเป็น Base64 โดยใช้ JavaScript เราไปดูโค้ดกันคับ

เริ่มจากโค้ด HTML กันก่อนเลย เป็น upload file ธรรมดาคับ

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  Please select a file and then hit Evaluate:
  
  <br/>
  <br/>
  <input id="file" type="file"/>
  <br/>
  <br/>
  <button id="button">Evaluate
  
</body>
</html>
จากนั้นใน javascript เราก็แปลงได้ดังนี้คับ

document.getElementById('button').addEventListener('click', function() {
  var files = document.getElementById('file').files;
  if (files.length > 0) {
    getBase64(files[0]);
  }
});

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}
ตัวอย่างโค้ดผมเอามาจากนี้คับ https://jsbin.com/piqiqecuxo/1/edit?html,js,output
comments

[1]
AGI
58 D
[1]
Adobe-PDF
1162 D
[1]
Android
1053 D
[2]
Angular
36 D
[40]
Animal
1146 D
[1]
Apache
1162 D
[1]
[4]
[2]
[1]
[10]
CMS-Joomla
1163 D
[2]
CMS-SMF
1163 D
[1]
[4]
[1]
[3]
[1]
Database
1162 D
[4]
[1]
DeAI
23 D
[1]
DeData
23 D
[1]
DeFi
23 D
[2]
Docker
53 D
[2]
[1]
Forex
20 D
[1]
Fruit
1147 D
[1]
General
44 D
[2]
Git
949 D
[6]
HTML
53 D
[1]
Health
48 D
[1]
Housework
1151 D
[2]
IT
1143 D
[2]
Imacro
1163 D
[20]
Java
25 D
[1]
Java-Web
1053 D
[2]
[2]
MQL5
975 D
[3]
MakeMoney
948 D
[18]
[1]
[1]
Maven
947 D
[5]
[1]
Mobile
1160 D
[2]
NGINX
36 D
[2]
NodeJs
53 D
[1]
Oracle
53 D
[3]
Physics
944 D
[4]
PugJS
949 D
[2]
React
958 D
[132]
Science
1145 D
[2]
[5]
Spring
36 D
[12]
[7]
[2]
[1]
[4]
Ubuntu
1113 D
[1]
WebLogic
1144 D
[4]