Como obtener el nombre de un archivo y almacenar en un input text?

publicado por: Anonymous

Tengo en mi formulario el input file en el cual elijo la imagen y su ruta se muestra en mi input text, el problema es que me almacena la ruta con *C:fakepath* y yo lo único que necesito es que me muestre el nombre del archivo y su extensión. ¿Alguna sugerencia para esto?

_x000D_

_x000D_

function actualiza(nombre){ _x000D_
  document.getElementById('m1').value='http://localhost:8080/evidencia/'+ nombre; _x000D_
} 

_x000D_

<input type="file" accept="image/*" capture="camera" onChange="actualiza(this.value)">_x000D_
<input type="text" id="m1" value="ruta" class="form-control">_x000D_
</div>              _x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Este es un resultado típico que tienen los navegadores por cuestiones de seguridad para que desde JavaScript no sepa la ruta completa del archivo si no que la enmascara en una ruta C:pakepath , esto está especificado en la documentación en la sección value hay una NOTA con este detalle.

Al acceder al atributo value, está accediendo a un String quee representa la ruta al archivo(s) seleccionado(s). Si el usuario seleccionó varios archivos, value representa el primer archivo en la lista.

Entonces para obtener el nombre puede obtener los archivos cargados , puede hacerlo con files que retornará un array y si es solo un archivo seleccionado puede acceder al indice 0 y luego al atributo name

_x000D_

_x000D_

function actualiza(nombre){ _x000D_
  console.log(nombre);_x000D_
  document.getElementById('m1').value='http://localhost:8080/evidencia/'+ nombre; _x000D_
} 

_x000D_

<input type="file" accept="image/*" capture="camera" onChange="actualiza(this.files[0].name)">_x000D_
<input type="text" id="m1" value="ruta" class="form-control">

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *