Base64 Decoder and Encoder In jQuery - base64.js

Base64 Decoder and Encoder In jQuery - base64.js
File Size: 7.15 KB
Views Total: 138
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

base64.js is a jQuery plugin that helps create an online Base64 decoder and encoder app to encode and decode Base64 data on the client-side.

How to use it:

1. Create textarea elements for the Base64 decoder and encoder.

<form>
  <label for="encode" class="encode">Encode</label>
  <textarea id="encode">jQueryScript</textarea>
  <label for="decode" class="decode">Decode</label>
  <textarea id="decode">alF1ZXJ5U2NyaXB0</textarea>
</form>

2. Place jQuery JavaScript library and the jquery.base64.js script at the bottom of the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.base64.js"></script>

3. The main JavaScript to activate the Base64 decoder and encoder.

var dec = $('#decode'),
    enc = $('#encode');

enc.keyup(function () {
    dec.val($.base64.btoa(this.value));
    // also possible:
    // dec.val( $.base64('encode', this.value) );
    // dec.val( $.base64.encode(this.value) );
});

dec.keyup(function () {
    // note: you can pass a third parameter to use the utf8 en- / decode option
    enc.val($.base64.atob(this.value, true));
    // also possible:
    // dec.val( $.base64('decode', this.value) );
    // dec.val( $.base64.decode(this.value) );
});

$('textarea').on('focus blur', function () {
    $(this).prev('label').stop().fadeToggle(200);
});

4. You can set utf8 encoding and decoding via global options:

  • utf8encode - utf8 encoding only
  • utf8decode - utf8 decoding only
  • raw - both (default: true)
$.base64.utf8encode = true;

This awesome jQuery plugin is developed by yckart. For more Advanced Usages, please check the demo page or visit the official website.