Question

我有两个输入标签，一个是type =＆＃34; file＆＃34;另一个是文字。

当我选择文件时，默认情况下文件名将显示在文件类型为文件的文本框中，但我希望它也反映在另一个文本框中。

MyCode：

<html>
<head>
<script>
function sync()
{
  var n1 = document.getElementById('n1');
  var n2 = document.getElementById('n2');
  n2.value = n1.value;
}
</script>
</head>
<body>
<input type="file" name="n1" id="n1" onkeyup="sync()"><br><br>
<input type="text" name="n2" id="n2"/>
</body>
</html>

Answer 1

使用onchange和value

function sync()
{
  var n1 = document.getElementById('n1');
 
  var n2 = document.getElementById('n2');
  n2.value = n1.value;
}

<input type="file" name="n1" id="n1" onchange="sync()"><br><br>
<input type="text" name="n2" id="n2"/>

Answer 2

使用jQuery已经在页面上显示（？）

您可以在change上使用n1事件：

$('#n1').on('change', function() {
    if ($(this).val()) {
        $('#n2').val($(this).val());
    }
});

演示：http://jsfiddle.net/tusharj/23rk9nqL/

Answer 3

我创建了一个jsfiddle here。您可能还会注意到chrome和其他浏览器喜欢注入假路径，以免泄露任何有关源计算机的信息。您可以使用n2.value = n1.value.split('\\').pop().split('/').pop();（jsfiddle here）

轻松删除路径

<input type="file" name="n1" id="n1" onchange="sync()"><br><br>
<input type="text" name="n2" id="n2"/>

function sync()
{
  var n1 = document.getElementById('n1');
  var n2 = document.getElementById('n2');
  n2.value = n1.value;
}

使用Javascript将文件名从文本框复制到另一个文本框

3 个答案: