<input id="upload" type="file">
<br>
<img id="imgbase64uri">
<br>
<textarea id="base64uri"></textarea>
#imgbase64uri{
margin:5px;
border:1px solid #000;
max-width:100%
}
#base64uri{
margin:5px;
width:500px;
height:125px;
border:1px solid #000;
}
//Javascript Images to base64 (data URI)
//https://www.eddiekidiw.org
function readFile(){
if(this.files && this.files[0]){
var a=new FileReader();
a.addEventListener("load", function(b){
document.getElementById("imgbase64uri").src=b.target.result;
document.getElementById("base64uri").innerHTML=b.target.result;
}); 
a.readAsDataURL(this.files[0]);
}
}
document.getElementById("upload").addEventListener("change", readFile);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.