ahmadajah03 Sun Nov 2020 1 year ago

Convert Image ke Base64 String Menggunakan jQuery

Pada artikel ini, saya akan mengonversi gambar menjadi string base64 menggunakan jQuery. Mari kita lihat:

Ubah & Tampilkan Gambar

Kode ini akan mengubah gambar menjadi base64 dan ditampilkan di halaman web:

<html>
<head>
  <title>Convert Image to Base64 String using jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
<form>
  <input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">
  <button type="submit">Submit</button>
  <br><br>
  <textarea id="base64Code" rows="15" cols="68"></textarea>
  <br><br>
  <img src="" id="base64Img" width="500">
</form>
</body>
<script type="text/javascript">
   function encodeImgtoBase64(element) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onloadend = function() {
      $("#base64Code").val(reader.result);
      $("#convertImg").text(reader.result);
      $("#base64Img").attr("src", reader.result);
    }
    reader.readAsDataURL(file);
  }
</script>
</html>

Keluaran:

Itu dia. Terima kasih sudah membaca.🙂

jquery conver image to base64 with jquery