How to set the value of a text field to load a file name using javascript?

Question

how to set the value of a text field based on the loaded file name. For example, I upload a file, for example test.zip, the same value affects the text box below the code, but try, but don’t get a solution?

var filename= document.getElementById("file").value;
    <form>
     File: <input type="file" id="file" name="file"/>
     Upload File : <input type="text" value="'+filename+'"/>
    </form>

Answer 1

Use something like this

  <script>
   function setfilename(val)
  {
    var fileName = val.substr(val.lastIndexOf("\\")+1, val.length);
   document.getElementById("filename").value = fileName;
  }
</script>
    <form>
     File: <input type="file" id="file" name="file" onchange="setfilename(this.value);"/>
     Upload File : <input type="text"  id="filename"/>
    </form>

Answer 2

You can get the file names by accessing the files of the fileUpload object, for example

document.getElementById("file").files[0].name

Assign this value to an onChangeevent text box fileInputlike this

document.getElementById("filename").value = document.getElementById("file").files[0].name;

will set the first file name in your field with id filename

, C:\fakepath\yourfilename.ext

Answer 3

onchange , , .

var file = document.getElementById("file");
file.onchange = function() {
    document.getElementById('filename').value = file.value;
};

:

Upload File : <input type="text" id="filename" value="'+filename+'"/>

, , , , . , / , .