Input file Jquery

Question

После выбора файла имя в input.file_name меняется у всех элементов

let addBtn = document.querySelector('.add');
let addImg = document.querySelector('.add_img');
let remove_img = document.querySelector('#remove');        
let num_file = 1;

let context_add_img = (`<div class="content"><input type="text" class="file_name" value="">
<input type="file" id="file_input${num_file}" class="input_file hide" value="">
<label class="label_add_img" for="file_input${num_file}"></label>
<button class="remove">del</button><div/>`);

addBtn.addEventListener('click', function() {
  console.log(1)
  num_file += 1
  addImg.insertAdjacentHTML('beforeend', context_add_img);

  $(function() {
    $('.remove').on('click',function(e){
      $(this).parent().remove();
    });            
  });

  $(".add_img").change(function(event) {
    $(".file_name").attr('value', event.target.files[0].name);
    //$(this).parent(".file_name").attr('value', event.target.files[0].name);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"> 
    <div class="add_img">
        <p>Добавить картинки</p>
        <button class="add">add</button><br>
    </div>
</div>

Answer 1

let addBtn = document.querySelector('.add');
let addImg = document.querySelector('.add_img');
let remove_img = document.querySelector('#remove');        

let context_add_img = index => `<div class="content"><input type="text" class="file_name" value="">
<input type="file" id="file_input${index}" class="input_file hide" value="">
<label class="label_add_img" for="file_input${index}"></label>
<button class="remove">del</button><div/>`;

addBtn.addEventListener('click', function(evt) {
  // в кач-ве аргумента для создания "уникальных" div.content 
  // будем брать кол-во самих блоков
  let index = document.querySelectorAll('.content').length;
  // получаем html-строку 
  let content = context_add_img(index);
  addImg.insertAdjacentHTML('beforeend', content);
  // ищем добавленный блок div.content
  let container = addImg.querySelector('#file_input'+index).closest('.content');
  // добавляем событие удаления
  container.querySelector('.remove').addEventListener('click', evt => evt.target.parentElement.remove());
  // добавляем событие для показа имени файла
  container.querySelector('[type="file"]').addEventListener('change', evt => container.querySelector('.file_name').value = evt.target.files[0].name);
});

<div class="container"> 
  <div class="add_img"><p>Добавить картинки</p>
    <button class="add">add</button><br>
  </div>
</div>

БЛОГ НА HUSL

Input file Jquery

Ответы (1 шт):