How to get the name of a file and store it in an input text?

Question

How to get the name of a file and store it in an input text?

Navigation

#1 by (1 votes)

3

I have the input file in my form in which I choose the image and its route is shown in my input text, the problem is that it stores the route with * C: \ fakepath * and I all I need is for you to show me the name of the file and its extension. Any suggestions for this?

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

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

javascript html

asked by Eiren Leza Caballero 10.03.2018 в 20:19

source

1 answer

How to prevent a listView from returning to the beginning when updating its adapter? Error could not revert when doing git revert

score 1 · Accepted Answer

This is a typical result that browsers have for security reasons so that since JavaScript does not know the full path of the file but masks it in a path C: \ pakepath, this is specified in the documentation in the section value there is a NOTE with this detail.

By accessing the value attribute, you are accessing a String that represents the path to the selected file (s). If the user selected multiple files, value represents the first file in the list.

Then to get the name you can get the files loaded, you can do it with files that will return a array and if it's just a selected file you can access the index 0 and then the attribute name

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

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