Jquery display value of input type file to other element

Question

I'm trying to display the value/name of an input file to an element. The code runs normal .. but the problem is when the user clicks and select a file . the file doesn't show up the moment the user selects the file but instead it shows when user clicks on the upload button again . so how will i make the value of the input field to show up the moment the user makes the choice .

$(document).ready(function () {
    $(".filename").each(function () {
        $('.upload').click(function () {
            $('#file_button').click();
            var file = $('#file_button').val();
            if (file !== null) {
                if ($('.filename').val() !== null) {
                    $($('.filename')).empty();
                }
                $('<span>' + file + '</span>').appendTo('.filename');
            }
        });
    });
});

my CSS :

#file_button {
   display: none;  
}

// then down goes the css for upload button

HTML :

<button type="button" class="upload"> Upload a File </button>
<p class="filename"> </p>
<input type="file" id="file_button"/>

How ..? sorry forgot to say i'm still new in jquery @Nilotpal Barpujari — JohnMi
– JohnMi, Commented Oct 9, 2013 at 22:51
if(file !== null){ if($('.filename').val() !== null){ Looks like you really want to be sure. Guess what value will never be null. ;) — epascarello
– epascarello, Commented Oct 9, 2013 at 22:52

Nikhil N · Accepted Answer · 2013-10-09 22:55:03Z

1

Check this one...

Demo Fiddle

$(document).ready(function () {
    $(".filename").each(function () {
        $('.upload').click(function () {
            $('#file_button').click();

        });

        $("#file_button").change(function () {
            var file = $('#file_button').val();
            if (file !== null) {
                if ($('.filename').val() !== null) {
                    $($('.filename')).empty();
                }
                $('<span>' + file + '</span>').appendTo('.filename');
            }
        });
    });
});

answered Oct 9, 2013 at 22:55

Nikhil N

4,5971 gold badge38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nilobarp · Accepted Answer · 2013-10-09 22:52:43Z

0

$("#file_button").on('change',function(){
    alert('Selected');
});

Then do want you intended by replacing the alert.

answered Oct 9, 2013 at 22:52

nilobarp

4,1322 gold badges34 silver badges38 bronze badges

Collectives™ on Stack Overflow

Jquery display value of input type file to other element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related