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

时间:2015-05-27 07:52:11

标签: javascript jquery html5

我有两个输入标签,一个是type =" file"另一个是文字。

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

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>

3 个答案:

答案 0 :(得分:4)

使用onchangevalue

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

答案 1 :(得分:1)

使用jQuery已经在页面上显示(?)

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

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

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

答案 2 :(得分:1)

我创建了一个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;
}