<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<style>
.main_input_file {
    display: none;
}

.upload_form div {
    height: 32px;
    background: #3498db;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    font-family: arial;
    font-size:14px;
    display: inline-block;
    vertical-align: top;
    padding: 0 15;
}

.upload_form div:hover {
    background: #2980b9;
    cursor: pointer;
}

#f_name {
    background: transparent;
    border: 0;
    display: inline-block;
    vertical-align: top;
    height: 30px;
    padding: 0 8px;
    width: 150px;
}
</style>

<form action="test.php" enctype="multipart/form-data" method="POST">

<div class="upload_form" id="file-upload">

    <label>

        <input type="file" class="main_input_file" name="files[]" multiple="multiple"/>
        <div>Прикрепить файл</div>
        <input class="f_name" type="text" id="f_name" value="Файлы не выбраны" disabled />

    </label>

</div>

<ul id="list-files"></ul>

<input name='button' type="submit" value="Загрузить">

</form>

<script>

    $(document).ready(function() {

        $(".main_input_file").change(function() {

            var f_name = [];

            //$("#list-files").empty();

            for (var i = 0; i < $(this).get(0).files.length; ++i) {
                file_type = $(this).get(0).files[i].type;
                if (file_type == 'image/png') {
                    file_name = $(this).get(0).files[i].name;
                    f_name.push(" " + file_name);
                    $("#list-files").append("<li>"+ file_name +"</li>");
                } else {
                    $("#list-files").append("<li>Файл имеет недопустимое расширение.</li>");
                }
            }

            $("#f_name").val("Число файлов: "+$("#list-files li").length);
        });

    });

</script>