document.getElementById("filetoRead").addEventListener("change",function(){ var file = this.files[0]; if (file) { if ((file.type == 'image/png') || (file.type == 'image/jpg') || (file.type == 'image/jpeg') ){ var reader = new FileReader(); reader.onload = function (evt) { var imgTag = '<img style="max-width:300px;" src="'+evt.target.result+'" alt="my image" />'; document.getElementById("image-container").innerHTML = imgTag; alert("Image succefully loaded"); }; reader.onerror = function (evt) { console.error("An error ocurred reading the file",evt); }; reader.readAsDataURL(file); }else{ alert("Please provide a png or jpg image."); return false; } } },false);
<div id="image-container"> </div> <p> Select an image from your PC to convert it to Base64 and display it in this document </p> <input type="file" id="filetoRead" />