How to write the Path of a file to upload in a text box?

Question

Little question: I'm trying to create a Form to upload a file.

Now i got a button to select the file and a submit button.

How can i design it like if i've selected a file, the path of it (C:\Users....) is shown in a textbox?`

Thx for help

Answer 1

To copy the selected file name/path to different text box, first have 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 so to show only the name (which is real) change to:

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 come with it's own button. Don't forget to set the enctype.

A regular text box won't let you upload files.