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
2
-
Do you mean copy the file path into different, separate textbox in addition to the input control itself?user447356– user4473562011-01-09 16:02:32 +00:00Commented Jan 9, 2011 at 16:02
-
Yes, like this. Watch the comment of mine in David Dorwards answerFlorian Müller– Florian Müller2011-01-09 16:10:08 +00:00Commented Jan 9, 2011 at 16:10
Add a comment
|
3 Answers
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];
}
2 Comments
Florian Müller
Wow, really nice! This is exactly what i've been looking for! Thanks a lot!
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.
3 Comments
Florian Müller
yes, i know, but i thought, <input type="file"> 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
Quentin
By default, most browsers display
<input type="file"> as a widget consisting of a text box and a button … which is what it sounds like you want. So what is the problem?
