一旦我选择输入类型=“文件”，就在文本框中获取文件名答案

【问题标题】：Getting file name in text box as soon as i choose with input type="file"一旦我选择输入类型=“文件”，就在文本框中获取文件名
【发布时间】：2014-03-12 11:11:45
【问题描述】：

<input type="file" name="img1" id="img1">
<input type="text" name="file_name" id="file_name">

我想要的是，只要我在输入类型 =“文件”中选择文件，我想在文本框中 (name =“file_name”) 中获取文件名，而无需任何单击或提交按钮。我无法弄清楚它的代码。请提供我的代码和想法。

【问题讨论】：

展示一次尝试或您所调查的内容，您更有可能获得帮助。
我不认为有办法做到这一点，你只能在服务器端得到它
@user1708762 注意Jquery 及其onchange 函数
@krishna 是的，我忘记了

标签： javascript php html

【解决方案1】：

  <input type="file" name="img1" id="img1" onchange="document.getElementById('file_name').value = this.value">
  <input type="text" name="file_name" id="file_name">

如果你想去掉c:\fakepath，你可以在this.value后面加上.split('\\').pop()

没有c:\fakepath

  <input type="file" name="img1" id="img1" onchange="document.getElementById('file_name').value = this.value.split('\\').pop().split('/').pop()">
  <input type="text" name="file_name" id="file_name">

DEMO

【讨论】：

但它显示 c:fakepath/something.jpg。我只想要一些东西.jpg 我该怎么做
请使用我回答的第二部分。 onchange="document.getElementById('file_name').value = this.value.split('\\').pop().split('/').pop()"

【解决方案2】：

你可以像这样在jquery中使用onchange

$("#img1").change(function(e){
    $("#file_name").val($("#img1").val().split('\\').pop().split('/').pop(););
});

在<head>的html中添加这一行

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Demo

【讨论】：

它只显示文件名而不显示路径
不是 jquery 问题
@user3368817 他没有指定他想要的解决方案。而且 Jquery 本身也是一个 javascript。我认为您应该在投票之前更好地了解这一点。
但它显示 c:fakepath/something.jpg。我只想要一些东西.jpg 我该怎么做
@user3368817 那么如果问题没有用jquery 标记怎么办？如果解决方案只能由它提供怎么办？你不回答是因为没有 jQuery 标签吗？我是一个不太了解 javascript 的人，即使是小事也必须使用 jQuery。这个答案也是一个解决方案，我认为它没有理由被否决。 +1

【解决方案3】：

以下将仅显示 file_name 文本框中的文件名。

<input type="file" name="img1" id="img1" onchange="updateFileName()">
<input type="text" name="file_name" id="file_name">
<script>

    function updateFileName() {
        var img1 = document.getElementById('img1');
        var file_name = document.getElementById('file_name');
        var fileNameIndex = img1.value.lastIndexOf("\\");

        file_name.value = img1.value.substring(fileNameIndex + 1);
    }
</script>

JsFiddle

【讨论】：

【解决方案4】：

这将使用jQuery显示文件名

  $("#img1").change(function(e){

     var fname=$("#img1").val().split('\\').pop().split('/').pop();
     $('#file_name').val(fname);
  });

DEMO

【讨论】：

问题没有用 jquery 标记。

【解决方案5】：

yourFileInputNode.on('change', function(e){
    var file  = e.target.files[0];
    // you can get file name from file var and set it anewhere
})

【讨论】：

【解决方案6】：

<input type="file" name="img1" id="img1" onchange="updateFileName()"><br><input type="hidden" name="file_name" id="file_name"><script>    
    function updateFileName() {
        var img1 = document.getElementById('img1');
        var file_name = document.getElementById('file_name');
        var fileNameIndex = img1.value.lastIndexOf("\\");
        file_name.value = img1.value.substring(fileNameIndex + 1);
    }
</script>

【讨论】：

将输入类型改为隐藏