Пользовательское поле для загрузки нескольких файлов не работает

#javascript #html #laravel #file #multi-select

Вопрос:

Я нашел этот пример кода на следующем веб-сайте: (https://speckyboy.com/custom-file-upload-fields / : второй пример) это дает вам возможность настроить ввод вашего файла, это действительно помогло мне, и мне очень понравилась реализованная там функция удаления изображения, поэтому я решил использовать тот же стиль для моего другого ввода нескольких файлов для загрузкинесколько фотографий одновременно, но это не сработало. Что не так с моим кодом?

 function readMultiFiles(input) {
  if(input.files amp;amp; input.files[0]) {
    for(i = 0; i < input.files.length; i  ) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('.image-upload-wrap-Multi').hide();
        $('.file-upload-image-Multi').attr('src', e.target.result);
        $('.file-upload-content-Multi').show();
        $('.image-title-Multi').html(input.files[0].name);
      };

      reader.readAsDataURL(input.files[i]);
    }
  } else {
    for(i = 0; i < input.files.length; i  ) {
      removeUploadMulti();
    }
  }
}

function removeUploadMulti() {
  $('.file-upload-input-Multi').replaceWith($('.file-upload-input-Multi').clone());
  $('.file-upload-content-Multi').hide();
  $('.image-upload-wrap-Multi').show();
}
        
$('.image-upload-wrap-Multi').bind('dragover', function() {
  $('.image-upload-wrap-Multi').addClass('image-dropping');
});

$('.image-upload-wrap-Multi').bind('dragleave', function() {
  $('.image-upload-wrap-Multi').removeClass('image-dropping');
});
 

Вот мое поле ввода:

 <div class="file-upload-Multi">
  <button 
    class="file-upload-btn-Multi" 
    type="button" 
    onclick="$('.file-upload-input-Multi').trigger( 'click' )"
  >
    2-Ajouter d'autres photos du produit
  </button>
  @if ($errors->has('fileCollection'))
    <span class="text-danger">{{ $errors->first('photo') }}</span>
  @endif
    <div class="image-upload-wrap-Multi">
      <input 
        type='file' 
        onchange="readMultiFiles(this);" 
        accept="image/*" 
        class="file-upload-input-Multi form-control @error('fileCollection') is-invalid @enderror"
        name="fileCollection[]"
        value="{{old('fileCollection')}}" 
        multiple="multiple" 
        nullable
      />
      <div class="drag-text-Multi">
        <h3>Faites glisser et déposez toutes les images de ce produit, ou sélectionnez "Ajouter une image"</h3>
      </div>
    </div>
    <div class="file-upload-content-Multi">
      <img class="file-upload-image-Multi" src="#" alt="your image" />
      <div class="image-title-wrap-Multi">
        <button 
          type="button" 
          onclick="removeUploadMulti()" 
          class="remove-image"
        >
          Retirer <span class="image-title-Multi">Uploaded Image</span> 
        </button>
      </div>
    </div>
</div>