0

Tengo una imagen guardada en una variable de Javascript y necesito insertarla en un input type file. La idea es que se inserte como si hiciera click en el input pero a nivel de código. Estoy probando lo siguiente:

html:

 <input multiple type="file"  id="fileNewIssue"  />

Javascript:

 var newImage = document.createElement('img'); 
  newImage.src = item_image;                                                                                                                        
  $("#fileNewIssue").src = newImage.src;

El problema de esto es que no genera el evento change en el input.

7
  • si te entiendo bien lo que tratas de hacer es que un input file tome el valor de una imagen ya guardada? Commented el 29 ago. 2019 a las 15:20
  • Exactamente. El objetivo es que al pegar una imagen del porta-papeles se cargue automáticamente en el INPUT como si hubiera hecho click en el mismo y la hubiese buscado. Ya logre guardar la imagen al pegarla en un input type text. Ahora solo me falta pasarla al INPUT type file. Commented el 29 ago. 2019 a las 15:23
  • que significa que tienes guardada una imagen en una variable? que tienes el base64?
    – Emeeus
    Commented el 29 ago. 2019 a las 15:24
  • 2
    creo que lo que tratas de hacer, no se puede por motivos de seguridad puedes mirar una respuesta [es.stackoverflow.com/questions/279411/… Commented el 29 ago. 2019 a las 15:28
  • 1
    Ok. entonces el tag img no aporta nada en este caso. Si tienes el base64, que no es mas que una lista de caracteres, podrías hacer un post común, con ajax o con un form, metiendolo en el value de un input type text. Con el base64 en el backend puedes hacer un archivo .jpg, .png etc
    – Emeeus
    Commented el 29 ago. 2019 a las 15:38

1 respuesta 1

2

Según dices en los cometarios, lo que tienes guardado en una variable de JavaScript es una imagen en base64, en dicho caso, no es necesario utilizar el type="file" en el input, con el type="text" sería suficiente.

const img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/wAALCAAwADABAREA/8QAHAABAAMAAgMAAAAAAAAAAAAACAAHCQIDBAYK/8QANBAAAQMDAwIEAgkFAQAAAAAAAgEDBAUGBwgREgAhCRMUIhgxCkFWV4GVltLTFiMyUWFx/9oACAEBAAA/ANw5+B8a0qOr0qzLGjND8zdpEUBT8VDoPZf1vW9eniERdN2B8L45uq56dDKdc9x1ykA3RqCiNC4jOzQIZnsbfJeQ7eZsKOEJCic0+Wzb18nUrevzEdgWlftBQXJcGHFizoVQjGpI1NiOq0BkyagYqLgCbZgQqipxM7M+HTH32Es38ljfs6nw6Y++wlm/ksb9nU+HTH32Es38ljfs69TyJpTO/wDJNQrP9U1CJTapHbGRT1jjJUHg3FTaN1SFtsgQEVpG+KkKkvcl6AOvy3LR0Ca8rGnUV2tz52R7fuM26NRaTFGbEnox6kJw+nFnzAN1gQJHhM+RIQuCiOATA0m5D+KLVbfeS4cJYlu0CiQrNpj6OC6NQeRxyVNNDEtlFtw2m07brxVe3LbpOdTqdcXXRZbIzIQAE3IlXZBT/a9fO7qP1M13WPreyLqLiuxm7Kx/TqvAtVpmoto5IZitOUymEexGrKv1GesgxXgisqB8dm1NdiLRyJifwgfD1suHf94wbYtqy6FHjHIqEpZEypSVHm75QInmyXnHScLiAKRKSrt8+hrSPpQkHMC1qpWDju24FuUjYor173qFLqFcTdxODUWJHlrHP2IqJJIEVDRU7IW1+Ya+kA4UuW0Lan5Fmx8WyblmHTx9ZUWahDgvin+Ml5n3RRVeyHJbaFVVE337dOKkVeJX6XHnQJUebCmNi8xIjuI40+BJuJCQqqEKp3RUXZeqE8WG+avjbwy89VygE+3WYFi1YojrKbmwaxXB81PrThyUt07ogqvWMtKfxXpZsbI1czLka5KtbNr3HQqVQYtvymq7Ir8OPSlFuisOuGrTJsrPdJwUVCaaeYLinICRqeIPj/AmZMFVSz6rRHrgGDd1Njvvy70fqvoatIERjiINSCcJvhJQUEOKARoiB32UUV7RphfTJNuGkRbiuuJfFJrB2645apMRmnpDPkSDJx6bE7g2MhlEMSVFEzQtkVRQ55z0mUCREudpm4Ly9bdLrc2q1CHVWqlDmSGeSNkQ7KZq2hEnETQN9k+pETTH6NXf906fLWj4fr+TKdflm1VopNpU91omqpbRijjjzKpzcFYp8T9vJCZdHZQFHU61iyNj+k5Yx9XbWr0UZ1EuSnv0yoRyVUR+O82Tbgbp3TcSVN06w31HaP8AOvhc3rRciS8pXFVmscTEotmVCNbqVRgqLwebjjUGl3Fx5UlPC84ichVto/MH2cRhUcoScE6VaueFn6Qzdt8Xk9EvO66FUPS02XFR12pR6f6Se1tDkR5HE48mA9yTyt1VfZ0lNHdsXDroxdfVMpMan3kxT5lKvyuxK3BkneEefL4Q6iEFll3adD8qOjZmrykRMh2Q9k6sjT1oMo2c6RkekHSLuSdQ0GDa9KjMuLPpswVc5NSjbRWUIEaHnzMWx84N1JVVEbfg9+G2OAZM3Jd1Til3rJF2lBTfLERoYhwAwdVE/uSgUXG1NDMOBLwJRLsrvjRw597ONP1RB/l66Kjq/wAKViC7Fl5RxbKjPioOsvXJANtwV+aKKubKn/vRB13adtHWf7Qj8rUwXkKclQSacMcmNWsjRCyaI8DsZ33O/IBFUQfdupCidVhg7S5gmDddpz7bYwdgCm2Sb7cQJGQY10z5cWUvOVEJg5TsNWTPiaq4pqLzaGIrtuWhVG1b4Rt6mMw4OUMVw4rA8W2mLjp7TYJ/wRcRE/BOvJ+NHDn3s4z/AFPB/l6//9k="

document.getElementById("imagen").value = img;
<form method="POST">
  <input type="text" value="" id="imagen" />
  <button type="submit">Enviar</button>
</form>

En el backend, puedes almacenar un archivo .jpg, .png etc, convirtiendo ese base64 en un archivo, pero eso dependerá de lenguage estés usando en el backend.

Si no tienes control sobre el backend, no es posible hacer nada de esto exepto que el usuario elija un archivo como está previsto que se use el input con el type="file" ya que no hay forma de acceder a los archivos locales del cliente a menos que exista un gesto explícito del usuario.

2
  • Es posible con c# a nivel de backend convertir el base64 a png o jpg? Commented el 29 ago. 2019 a las 18:42
  • 1
    Si claro, todos o casi todos los lenguajes tienen una forma, googleando en stackoverflow en inglés hay varios ejemplos stackoverflow.com/questions/18827081/…
    – Emeeus
    Commented el 29 ago. 2019 a las 19:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.