Как добавить и сохранить имена файлов из input[type="file"]?

Question

[Абра Кадабра]

Необходимо сделать вот такю форму:

Я делаю ее при помощи js, а имена вывожу при помощи

.append()

.

вот то, что я написал:
сама форма:

<div class="form-holder">
                    <h2>ОТПРАВИТЬ ДОМАШНЕЕ ЗАДАНИЕ</h2>
                    <h3>ПРИКРЕПЛЕННЫЕ ФАЙЛЫ: </h3>
                    
                    <div class="attached">
                        
                    </div>
                    
                    
                    <div class="attach">
                                                 
                        <div class="files">
                           <input type="file" id="upload" name="upload" style="display:none;" required multiple>
                            <a id="attach-file">+ ПРИКРЕПИТЬ ФАЙЛ</a>
                            <p>Файл должен быть в формате .pdf</p>
                        </div>
                        
                        <form action="">
                            <textarea name="" id="" cols="30" rows="10" placeholder="Ваш комментарий"></textarea>
                            <div class="buttons">
                                <a href="">отправить</a>
                                <a href="">?</a>
                            </div>
                        </form>
                    </div>
                </div>

обработка:

$('#attach-file').click(function() {
                    $('#upload').click();
                    var $newDiv = "";
                    $('#upload').change(function() {
                        var fileName = $('#upload').val();
                            var $newDiv = $("<div class='attached-item'>"+fileName+"<a><img src='img/cross.png' alt=''></a></div>");
                        $('.attached').append($newDiv);
                    });
                });

вывод:


Дело в том, что с каждым нажатием добавляется на 1 элемент больше, хотя переменную я обнуляю . Что можно с этим сделать?

Answer 1

[Евгений Петров]

Вы при каждом клике $('#attach-file').click() навешиваете новый обработчик $('#upload').change().
Вынесите этот обработчик за пределы первого.

Comments

[Абра Кадабра]

Спасибо огромное. Можете только объяснить как это срабатывало ? Т.к. я не понимаю: обработчик ведь работает исключительно во время ивента. Тогда как при клике changе() мог срабатывать несколько раз(либо дополнительное количество раз) ? Разве предыдущие не абортятся ?

[Евгений Петров]

Нет, не абортируются:) Вы должны понимать 2 вещи:

1. Анонимные функции всегда будут добавляться, независимо от способа добавления (нативным или с помощью jQuery). И снять такие функции может только jQuery в силу своего механизма установки и снятия обработчика (он генерирует внутренние уникальные имена).

2. Именованные функции-обработчики, установленные с помощью addEventListener, не будут вызываться многократно. Но установка обработчика в jQuery отличается от нативного JS и даже именованные функции будут вызываться столько раз, сколько вы их установили как слушателя события.

[Абра Кадабра]

Евгений Петров: Спасибо огромное еще раз! Вы мне очень помогли.

[Евгений Петров]

Посмотрите пример jsfiddle.net/petroveg/mfky4a8o

jQuery позволяет обнулить все указанные обработчики, но зато до удаления именованные функции будут выполняться столько раз, сколько их указали в качестве обработчика.

Нативный DOM исключает повторный запуск именованных функций, но не позволяет снять с прослушивания анонимные функции.

[Евгений Петров]

Да, и вот ещё — установив обработчик 1 раз, вы будете каждый получать его срабатывание при всплывающем событии с зарегистрированным названием.

В нативном JS есть возможность ловить и на этапе распространения (это когда из window к целевому узлу), но это, по причине IE 8 и ниже, не использовали, не использовали, да и забыли:) А жаль — штука полезная.

[Абра Кадабра]

Евгений Петров:
Спасибо.
Из ваших слов, помимо информации я понял, что многое еще стоит изучить :)