Javascript and PHP Base64 Primer Tutorial
We’ve long been interested in all of the PHP functions…
- urldecode
- urlencode … and sometimes, especially if data URI data is involved …
- base64_decode
- base64_encode
… to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a form (sometimes method=POST) element.
If there is no form involved and/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript …
… but just recently we had an occasion (and then another) to start getting interested in Javascript Base64 conversion usages, using …
… when we presented …
- Venn Diagrams Onclick Tutorial (and before that creating Flowcharts)
- HTML Square Horizontal Rule Plot Polynomial Tutorial
… and if memory serves me correctly, we first started using btoa and atob to help with …
- creating a background image for an HTML element via a Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI (and think perhaps the reason to “go data URI” is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) … but recently we’ve started looking at btoa and atob even more because …
- to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research enctype for other thoughts here) where we need to go (in PHP, something like) …
$phpvar = str_replace('+', ' ', urldecode($_POST['fieldposted']));
… a really kludgy and annoying thing for us because what if that $_POST[‘fieldposted’] has legitimate text like …1 + 1 = 2
… not …
1 + 1 = 11… to use syntax above is wrong … and so in today’s proof of concept (btoa_atob_base64.php‘s) live run we deliberately entered …
The rain +
in Spain +
falls mainly +
on the plain.
… to show you that, indeed, the use of Javascript btoa at the form’s onsubmit (form) event can help accurately be interpreted by any destination PHP (here’s looking at you, kid) via …<?php
// …
echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";
// …
?>
… type of PHP code, and never interpret the data incorrectly
Clearly, if you are not asleep, you’re interested, and we hope this helps, or clarifies, a little!
Stop Press
WordPress Blog Email Post Plus Tutorial on 29th February 2020 was a leap (chortle, chortle) into the realization that the use of btoa (“to base64” … go figure why atob is “from base64”) above is dodgy for many emoji character “range” data, so you might want to check that out for yourself!
If this was interesting you may be interested in this too.
