<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsBase64();" />
<div id="newImgArea"></div>
<script type="text/javascript">
function encodeImageFileAsBase64() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <-- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById('newImgArea').innerHTML = newImage.outerHTML;
// print base64 version in the console because it gives you the ability to copy
// directly to clipboard in Chrome
console.log(document.getElementById("newImgArea").innerHTML);
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script><input type="file" accept='image/*' /> <img id="output" /> <script>
const output = document.querySelector('#output');
output.style.display = 'none'
const file = document.querySelector('input[type=file]');
file.addEventListener('change', e => {
console.log(`converting ${e.target.value}`)
encodeImageFileAsURL(e.target)
})
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function () {
console.log('RESULT', reader.result);
output.src = reader.result;
output.style.display = 'inline'
}
reader.readAsDataURL(file);
} </script>
