Image(type=file) convert to Base64

0
=
0
+
0
No specific Bitcoin Bounty has been announced by author. Still, anyone could send Bitcoin Tips to those who provide a good answer.
0

I would like to get the image in base64 once the user choosed that (before submitting the form). Something like:

var file = document.getElementByTagName('file').getAsBase64();
Tags:

1 Answer

1
=
1
=
$3
1 tip with total amount of 6.77 mBTC($3 USD) have been sent by alex@qrid

I found answer:

html:

<div>
<div>
    <label for="filePicker">Choose or drag a file:</label><br>
    <input type="file" id="filePicker">
</div>
<br>
<div>
    <h1>Base64 encoded version</h1>
    <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>
</div>

</div>

Javascript:

var onFileSelect= function(evt) {
var file = files[0];
var files = evt.target.files;

if (files && file) {
    var reader = new FileReader();

    reader.onload = function(readerEvt) {
        var binaryString = readerEvt.target.result;
        document.getElementById("base64textarea").value = btoa(binaryString);
    };

    reader.readAsBinaryString(file);
}
}; 
if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filePicker').addEventListener('change', onFileSelect, false);
} else {
    alert('The File APIs are not fully supported in this browser.');
}

It works for me :)

SEND BITCOIN TIPS
User rating:

Thank you!

0

Too many commands? Learning new syntax?

FavScripts.com is a free tool to save your favorite scripts and commands, then quickly find and copy-paste your commands with just few clicks.

Boost your productivity with FavScripts.com!

Post Answer