Блог

 $(document).ready(function() {  var counter = 1;  $("#addButton").click(function() {  if (counter gt; 100) {  alert("Only 100 uploads allow");  return false;  }  var newTextBoxDiv = $(document.createElement('div'))  .attr("id", 'TextBoxDiv'   counter);  let ds = "#file_"   counter;  let dsi = "file_"   counter;  // let dst = "#TextBoxDiv"  (counter-1);  $('#TextBoxesGroup').hide();  newTextBoxDiv.after().html('lt;label class="mt-3"gt;Image#'   counter   ' : lt;/labelgt;'    'lt;label id="attachments_btn" class="btn btn-icon btn-circle btn-light btn-hover-text-primary btn-shadow similar"gt;lt;i class="fas fa-plus"gt;lt;/igt;lt;input type="file" class="file" id="'   dsi   '" name="files[]" multiple="multiple" required /gt;lt;input type="hidden" name="profile_avatar_remove" /gt;lt;/labelgt;');  newTextBoxDiv.appendTo("#TextBoxesGroup");  counter  ;  var prev_count = counter - 1  newDiv(ds);  });  $("#removeButton").click(function() {  if (counter == 1) {  alert("No more textbox to remove");  return false;  }  counter--;  $("#TextBoxDiv"   counter).remove();  });  });  

выше приведен мой jQuery.

Вот мой HTML

 lt;div class="row"gt;  lt;div class="col-md-8"gt;  lt;div class="form-group" id="TextBoxesGroup"gt;  lt;!-- // --gt;  lt;/divgt;  lt;/divgt;  lt;div class="col-md-4 mt-4"gt;  lt;!-- lt;button id=''gt; --gt;  lt;label id="addButton" class="btn btn-icon btn-circle btn-light btn-hover-text-primary btn-shadow similar"gt;  lt;i class="fas fa-plus fa-2x"gt;lt;/igt;  lt;/labelgt;   lt;label id="removeButton" class="btn btn-icon btn-circle btn-light btn-hover-text-primary btn-shadow similar"gt;  lt;i class="fas fa-minus-circle fa-2x"gt;lt;/igt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;  

мне нужно показать предварительный просмотр на каждом выбранном изображении, но это не работает, но если я должен использовать код напрямую, как показано ниже, предварительный просмотр будет работать.

 lt;label id="attachments_btn" class="btn btn-icon btn-circle btn-light btn-hover-text-primary btn-shadow similar"gt;  lt;i class="fas fa-plus"gt;lt;/igt;  lt;input hidden type="file" class="file" id="multiFiles" name="files[]" multiple="multiple" required /gt;  lt;input type="hidden" name="profile_avatar_remove" /gt;  lt;/labelgt;  

Пожалуйста, помогите, я не знаю, что делаю не так.

Я ссылаюсь на запрос загрузки, используя имя класса $( «. файл»); как показано ниже

 $('.file').on('change', function() {  $(".multi-file-details").show();  multiImgPreview(this, 'div.multi-item');  });   var multiImgPreview = function(input, imgPreviewPlaceholder) {  if (input.files) {  var filesAmount = input.files.length;   for (i = 0; i lt; filesAmount; i  ) {  var reader = new FileReader();   reader.onload = function(event) {  var result = event.target.result;  var spl_array = result.split(',');  var data_array = spl_array[0].split(';');  var filetype_ary = data_array[0].split(':');  var filetype = filetype_ary[1];  if (filetype == "image/jpeg" || filetype == "image/png") {  // $('#attachments_btn').hide();  $($.parseHTML('lt;imggt;')).attr('src', result).appendTo(imgPreviewPlaceholder);  }  }   reader.readAsDataURL(input.files[i]);  }  }   };