CODEWITHSUNDEEP
javascripthtmlfile-upload
Florian Müller
Florian Müller

Reputation: 7785

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

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

Upvotes: 4

Views: 20598

Answers (3)

kark
kark

Reputation: 4853

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

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

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

Upvotes: 7

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 1

Related Questions