Почему несколько раз открывается окно выбора файла по нажатию на input[type="file"]?

Question

[Костя]

Мне нужно было стилизовать кнопку загрузки файла и я сделал псевдоклик по сторонней кнопке, которая передает триггер клик инпуту загрузки файла. По нажатию несколько раз открывается окно. Скажу, что форм на странице несколько, но js код работает с контекстом одной формы.. вот поэтому не пойму в чем дело. Этот баг только в Chrome.

Вот код:

$('.upload-file').on('click', function() {
        jQuery(this).closest('.file-wrap').find('.resume-file').trigger('click').change(function() {
          var flieName = $(this).val().replace(/.*\\/, "");
          $(this).closest('.file-wrap.left').addClass('hide');
          $(this).closest('.form-wrap').find('.file-name').addClass('visible').
          find('span').text(flieName);
        });
      });

Для наглядности html:

<div class="file-wrap">
  <label>
  	<button class="btn collapse upload-file"><i class="fa fa-upload"></i> Прикрепить резюме</button> 
  	<div class="hidden"><input class="resume-file" type="file"></div>
  </label>
</div>

Answer 1

[Алексей Верховцев]

Константин, а зачем Вам собственно говоря, для этого JS? Можно и простым CSS обойтись, а уже если хотите отображать название загружаемого файла, то можно и JS подрубить именно для этого. Вам нужно просто сделать обертку, она у вас есть. сделать Вашему input opacity: 0; чтобы он был невидим, дать обертке position: relative; дать input position: absolute; сделать нужный размер и расположить в нужном месте, а также задать z-index, к примеру 2, и сделать в обертке ещё блок с вашей новой кнопкой, также дать ей position: absolute; те же размеры что и input и расположение в том же месте, а z-index: 1; чтобы она по оси оказалась под input, но т.к. вы дали input opacity: 0; то вы будете видеть только свою стилизованную кнопку, а кликать на самом деле по input