How to write file path to upload to text box?

Question

Little question: I'm trying to create a form for uploading a file.

Now I have a button for selecting a file and a submit button.

How can I create it, as if I selected a file, the path to it (C: \ Users ....) is displayed in the text box? `

thanks for reference

Answer 1

To copy the selected file name / path to another text field, first use this JS:

function CopyMe(oFileInput, sTargetID) { document.getElementById(sTargetID).value = oFileInput.value; } 

And it will work with such HTML:

 <div> <input type="file" onchange="CopyMe(this, 'txtFileName');" /> </div> <div> You chose: <input id="txtFileName" type="text" readonly="readonly" /> </div> 

Test case: http://jsfiddle.net/yahavbr/gP7Bz/

Note that modern browsers will hide the real full path, showing something like C:\fakepath\realname.txt to show only the name (which is real):

 function CopyMe(oFileInput, sTargetID) { var arrTemp = oFileInput.value.split('\\'); document.getElementById(sTargetID).value = arrTemp[arrTemp.length - 1]; } 

( http://jsfiddle.net/yahavbr/gP7Bz/1/ )

Answer 2

If you want to upload a file, use <input type="file" …> and it will have its own button. Remember to install enctype .

A regular text box will not allow you to upload files.

Answer 3

<input type="file"..> will not display the text field in the Chrome and Safri browser, we can customize the display styles by CSS itself, follow the link here