Quiero guardar una imagen en formato b64 en mi base de datos. Por razones por las que quiero tratar con la lógica en el lado frontal de las cosas. Mi backend envía un formulario y ya encapsula la entrada del campo de archivo con una función onChange que convierte img -> b64:
<form> <input id="file-select" name="pic" class="form-control" type="file" onchange="getImage()"> <button>submit</button> </form> donde getImage() se ve así:
function getImage() { var reader = new FileReader(); var f = document.getElementById("file-select").files; reader.onloadend = function () { console.log(reader.result); } reader.readAsDataURL(f[0]); } ¿Cómo puedo reemplazar lo que envía el campo de entrada al presionar el botón con el valor de reader.readAsDataURL(f[0]) ?
value de entradaon* controladores JS (igual que, con suerte, no use atributos de style en línea). Use addEventListener() en su lugaraction de formulario faltante para la URL a la que está enviandorequired a su elemento de entrada const EL = (sel, el) => (el || document).querySelector(sel); const EL_file = EL("#file-select"); const readFile = () => { if (!EL_file.files) return; const FR = new FileReader(); FR.addEventListener("load", (evt) => EL_file.value = evt.target.result); FR.readAsDataURL(this.files[0]); }; EL_file.addEventListener("change", readFile); <form id="file-form" action="save_base64.php"> <input id="file-select" name="pic" class="form-control" type="file" required> <button>Submit</button> </form>