Display Selected File In Html Input Before Upload

How can i show file that i select thru browse field into html input? I want to see file that i selected before i press upload? Here is my code:

Solution 1:

<form>
  <input class="upload"type="file"id="uploadOne" name="uploadOne" onchange="setfilename(this.value);" value="Select File"/ >
  <input id="uploadFile" name="uploadFileOne"type="text" disabled="disabled" placeholder="EWIS" class="name-info-form file-witdth" />
</form>

remove value=<?php echo $file_name; ?> and use the javascript for set the name of file in textbox

<script>functionsetfilename(val)
  {
    var fileName = val.substr(val.lastIndexOf("\\")+1, val.length);
    document.getElementById("uploadFile").value = fileName;
  }
</script>

when you select the file using browse button, onchange event will fire and set the file name in text-box :)

Share