Base64 Decoder and Encoder In jQuery - base64.js

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.

See Also:

• Encode JavaScript To Japanese Emoticons - jQuery Aaencode

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.