Question

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

我想要的就是我在输入类型中选择文件=＆＃34;文件＆＃34;我想在文本框（name =＆＃34; file_name＆＃34;）中获取文件名，而无需任何单击或提交按钮。我无法弄清楚它的代码。请提供我的代码和想法。

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

如果您要摆脱.split('\\').pop()

，可以将this.value添加到c:\fakepath的末尾

没有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

Answer 2

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

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

在html的<head>中添加此行

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

Demo

Answer 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

Answer 4

这将使用jQuery

显示文件名

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

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

DEMO

Answer 5

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

Answer 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>

我选择输入类型=“文件”后立即在文本框中获取文件名

6 个答案: