选择文件时更改标签内容 jQuery

Question

So, I'm attempting to make my file upload input look a little bit better than the default buttons. All is going well, however, I can't seem to find a jQuery script which can do what I want it to do.

What I want to happen is, when a file isn't selected, I would like the label to display "Choose an avatar", but when a file is selected, I would like it to display the files name, ie: "example.png" instead of "Choose an avatar".

This is my HTML:

<form action="" method="post" class="avatar-form-form" enctype="multipart/form-data">
    <input id="avatar-file" type="file" name="avatar">
    <label for="avatar-file">Choose An Avatar</label>
</form>

Also, if the user selects multiple files, I would like it to say "Too many files selected."

All help is appreciated as I am new to jQuery.

Answer 1

You can set text() of label as val of input, and for multiple files you would have to use multiple

 $('input').change(function() { $(this).next('label').text($(this).val()); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" class="avatar-form-form" enctype="multipart/form-data"> <input id="avatar-file" type="file" name="avatar"> <label for="avatar-file">Choose An Avatar</label> </form>

If you want to hide default file input's text you can use color: transparent in CSS DEMO