HTML input type file does not display file name in chrome

Question

I use the jqueryui dialog to display a modal window that has a form with an input file type tag.

In chrome, when a file is selected, file name is not displayed . When I hover above the browse button, the file name is displayed, but otherwise nothing. It works great with firefox. Below is a screenshot.

I want to know what to do to display the name next to the select button.

Answer 1

I also had this problem. To handle this, I added a box next to the browse button, and then added the text of the change as follows:

  $("#fileUpload").change(function (e) { var path = this.value; this.form.field.value = "..." + path.substring(11, path.length); }); 

a substring was added as it added \ fakepath \ to the beginning of the path name.

Answer 2

It works well.

  <input type="file" class="button" id="fileupload" value="Upload file" multiple onChange="handleFiles(this.files)">