javascript - Getting file name in text box as soon as i choose with input type="file"

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

What i want is as soon i choose file in input type="file" i want to get the file name in text box (name="file_name") without any click or submit button. I could not figure out the code for it. Please provide my the code and idea.

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

Share Improve this question asked Mar 12, 2014 at 11:11 user3304709

Show an attempt or what you've looked into, and you're much more likely to get help. – Mitya Commented Mar 12, 2014 at 11:13
I don't think there is a way to do it, you can get that on server side only – halkujabra Commented Mar 12, 2014 at 11:14
@user1708762 be aware of Jquery and its onchange function – krishna Commented Mar 12, 2014 at 11:18
@krishna Ya i forgot i think – halkujabra Commented Mar 12, 2014 at 11:21

Add a comment |

6 Answers 6

Sorted by: Reset to default 12

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

You can add .split('\\').pop() to the end of this.value, if you want to get rid of the c:\fakepath

Without the 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

you can use onchange in jquery like this

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

add this line in <head> of html

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

Demo

The following will show only the filename in file_name textbox.

<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

This will show the filename using jQuery

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

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

DEMO

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Getting file name in text box as soon as i choose with input type="file" - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)