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

Do you mean copy the file path into different, separate textbox in addition to the input control itself? — Shadow Wizard Says No More War, Jan 09 '11 at 16:02
Yes, like this. Watch the comment of mine in David Dorwards answer — Florian Müller, Jan 09 '11 at 16:10

score 7 · Accepted Answer · answered Jan 09 '11 at 16:24

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/)

Wow, really nice! This is exactly what i've been looking for! Thanks a lot! — Florian Müller, Jan 09 '11 at 16:29
@Florian Cheers, though can't really understand what you need it for.. :) — Shadow Wizard Says No More War, Jan 09 '11 at 16:36

score 1 · Answer 2 · answered Jan 09 '11 at 15:54

1

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.

answered Jan 09 '11 at 15:54

Quentin

857,932
118
1,152
1,264

yes, i know, but i thought, is a button, and if i select with this one a file, the path of it will be shown in a textfield. This is much more user-friendly – Florian Müller Jan 09 '11 at 16:09
By default, most browsers display `` as a widget consisting of a text box and a button … which is what it sounds like you want. So what is the problem? – Quentin Jan 09 '11 at 16:21
Chrome show the selected file as "label", looks like the OP want it inside a textbox in addition. :) – Shadow Wizard Says No More War Jan 09 '11 at 16:26

score 0 · Answer 3 · answered Mar 05 '13 at 07:23

0

The <input type="file"..> will not show textbox in chrome and safri browser, we can configure the display styles by CSS itself, go to the link here

answered Mar 05 '13 at 07:23

kark

4,543
6
29
43

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

3 Answers3

Linked