javascript jquery Загрузка файлов в скрытое поле на форме и вывод списка прикреплённых файлов -- "Стилизация поля загрузки"

Предположим, то вы хотите использовать свою кнопку (или любой другой элемент) для добавления файлов на форму. Делаем так:

  1. Скрываем input file в который фактически будут загружаться файлы:
     <input type="file" name="Comment[files][]" id="comment-files" multiple style="display:none;">
    
  2. Далее на том элементе, при клике на который должно показывать окно выбора файлов, повесим событие:
    $('a#add-comment-files').on('click', function() {
    	$('input#comment-files').trigger('click');
    	return false;
    });

    -- оно вызовет клик на скрытом элементе -- как бы переадресуя наш клик.

  3. Если вы хотите выводить имена прикреплённых файлов, то в случае если значение скрытого инпута изменится (пользователь выбрал что-то новое) можно повесить такой обработчик:
    $('input#comment-files').on('change', function() {
    	showFileNames();
    	return false;
    });
    
  4. И реализовать функцию вывода списка названий прикреплённых файлов:
    function showFileNames()
    {           
        var files  = $("input:file[name='Comment\[files\]\[\]']").prop("files");
     
        console.log('Имена файлов:', files); 
     
        var $attachedFilesList = $('ul#attached-fiels-list');
     
        $attachedFilesList.html('');
        if (files.length > 0 ) {
     
            for (var i = 0; i < files.length; i++) {
                //console.log(files[i].name);
                 $attachedFilesList.append('<li><a href="#">'
                 + files[i].name
                 + '</a> <!-- <a href="#" class="del">delete</a> --> </li>');
            }
        } else {
            $attachedFilesList.html('нет прикреплённых файлов');
        }
    }