добавить несколько изображений только с одной кнопкой

Question

Я реализую загрузку нескольких изображений и работает правильно. Вопрос заключается в том, что я хочу реализовать его только с помощью одной кнопки. когда он щелкнут, откроется диалоговое окно просмотра и выберите изображение. Как мне это сделать?

var counter = 0; 
$(document).ready(function() { 
// To add new input file 
$('[id^=add_more]').click(function() { 
    $("#show" + this.id.replace(/\D/g, "")).append($("<div/>", { 
     id: 'filediv' 
    }).fadeIn('slow').append($("<input/>", { 
     name: 'theImage', 
     type: 'file', 
     id: 'file' 
    }))); 
}); 

$('body').on('change', '#file', function() { 
    if (this.files && this.files[0]) { 
     var ext = $(this).val().split('.').pop().toLowerCase(); 
     if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) { 
      $('#file').val(''); 
      $('#file').remove(); 
      alert('Type Of File Is Not Valid!'); 
     }else{ 
      counter += 1; 
     $(this).before("<div id='abcd" + counter + "' class='abcd'><img id='previewimg" + counter + "' src=''/></div>"); 
     var reader = new FileReader(); 
     reader.onload = imageIsLoaded; 
     reader.readAsDataURL(this.files[0]); 
     $(this).hide(); 
     $("#abcd" + counter).append($("<i/>", { 
      class: 'fa fa-times', 
      id: 'img', 
      top:0, 
      alt: 'delete' 
     }).click(function() { 
      $(this).parent().parent().remove(); 
     })); 
     } 

    } 
}); 
// Preview Img 
function imageIsLoaded(e) { 
    $('#previewimg' + counter).attr('src', e.target.result); 
} 
}); 

Answer 1

Завершить событие click() на последнем входе после его добавления.

$('[id^=add_more]').click(function() { 
    $("#show" + this.id.replace(/\D/g, "")).append($("<div/>", { 
     id: 'filediv' 
    }).fadeIn('slow').append($("<input/>", { 
     name: 'theImage', 
     type: 'file', 
     id: 'file' 
    }))); 
    $("#file").click(); 
});