Let's say for example I have this code:

<input type="file" id="file" name="">
<input class="uploadarea">
<span class="button">Browse</span>

Now I've setupped some css to change the default input file button's look, And now the question is, How do i change .uploadarea's value depending on the value of #file when I select a file?

I currently have this code but I don't know what to do next.

var x = document.getElementsByTagName('input');
inputfile = x[0];
textbox = x[1];

Let's say for example I have this code:

<input type="file" id="file" name="">
<input class="uploadarea">
<span class="button">Browse</span>

Now I've setupped some css to change the default input file button's look, And now the question is, How do i change .uploadarea's value depending on the value of #file when I select a file?

I currently have this code but I don't know what to do next.

var x = document.getElementsByTagName('input');
inputfile = x[0];
textbox = x[1];

• javascript
• forms

Share Improve this question Follow asked Feb 16, 2012 at 13:18 Jürgen PaulJürgen Paul 15k2828 gold badges9696 silver badges136136 bronze badges 6

• 1 What exactly do you want to do? – gdoron Commented Feb 16, 2012 at 13:22
• I want to use the filepath in the input[type=file] as the value of the input with a class uploadarea. – Jürgen Paul Commented Feb 16, 2012 at 13:27
• @user1099531 You can't get the path of a file with the file input element, just the filename. – Niklas Commented Feb 16, 2012 at 13:30
• 1 Why are you using a class ? are there lots of these ? – Manse Commented Feb 16, 2012 at 13:31
• ^nope, But some elements have the same styling as those ones. – Jürgen Paul Commented Feb 16, 2012 at 13:36

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

Add an onchange handler to handle the change event on the file event :

<input type="file" id="file" name="" onchange="something(this.value)">
<input id="somethinghere" class="uploadarea">
<span class="button">Browse</span>

function something(val) {
    document.getElementById('somethinghere').value = val;
}

You need to add the id attribute for this to work

Yes. Use onchange. And by the way read alternate to onchange event in <input type='file' />. There are some problems with JS manipulation after file select.

Simple jQuery code:

$('#file').change(function(){
    $('.uploadarea').val(this.value);
});

pure Javascript:

<input type="file" id="file" onchange="foo()" />
<input class="uploadarea" id="other" />

function foo(){
    document.getElementById('other').value = this.value
}