CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JohnMi
JohnMi

Reputation: 81

Jquery display value of input type file to other element

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

Upvotes: 1

Views: 3949

Answers (2)

Nikhil N
Nikhil N

Reputation: 4577

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');
            }
        });
    });
});

Upvotes: 1

nilobarp
nilobarp

Reputation: 4084

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

Then do want you intended by replacing the alert.

Upvotes: 0

Related Questions