根据另一个输入的值更改输入的值

Question

比如说我有这个代码：

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

现在我已经设置了一些 css 来更改默认输入文件按钮的外观，现在的问题是，当我选择文件时，如何根据 #file 的值更改 .uploadarea 的值？

我目前有此代码，但我不知道下一步该做什么。

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

Answer 1

添加一个onchange处理程序来处理文件事件上的change事件：

<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;
}

您需要添加id 属性才能使其工作

Answer 2

是的。使用onchange。 顺便读一下alternate to onchange event in <input type='file' />。文件选择后JS操作存在一些问题。

Answer 3

简单的jQuery代码：

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

纯Javascript：

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

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