Дозагрузка картинок через один input

Question

Никак не могу решить задачу. Обгуглился пытался придумать какойто костыль но все попытки не увенчались успехом. Скрипт выводит пользователю на экран загруженные ним картинки. input для этих целей используется один. Соответственно когда пользователь использует input повторно, то его value сбрасывается. И на сервер приходит только последний результат. Пытался добавлять еще один инпут и ссылаться на него, но потерял последующее отображение картинок. Заранее спасибо за помощь.

HTML

<form action="/service/sdelat-spravky-na-avto" id="img-upload-form" method="post" enctype="multipart/form-data">
    @csrf
    <p>
        <label for="upload_imgs" class="button hollow">Загрузите ваши фото +</label>
        <input style="display: none;" class="show-for-sr" type="file" id="upload_imgs" name="upload_imgs[]" multiple>
    </p>
    <div class="quote-imgs-thumbs quote-imgs-thumbs--hidden" id="img_preview" aria-live="polite"> 
    Тут отображается превью загруженных картинок. 
    </div>

</form>

JS

<script type='text/javascript'>
                $(function () {
                    $(".spoiler").hide();

                    $(".spoiler-link").on("click", function (e) {
                        var idSpoiler = $(this).attr("href"),
                            classSelect = "spoiler-link--active";

                        $(this).toggleClass(classSelect);
                        $(idSpoiler).slideToggle(200);

                        e.preventDefault();
                    });
                });


                var imgUpload = document.getElementById('upload_imgs')
                    , imgPreview = document.getElementById('img_preview')
                    , imgUploadForm = document.getElementById('img-upload-form')
                    , totalFiles
                    , previewTitle
                    , previewTitleText
                    , img;

                imgUpload.addEventListener('change', previewImgs, false);
                imgUploadForm.addEventListener('submit', function (e) {
                    e.preventDefault();
                    alert('Images Uploaded! (not really, but it would if this was on your website)');

                    $.ajax({
                        url: $(this).attr('action'),
                        method: "POST",
                        data: new FormData(this),
                        dataType: 'JSON',
                        contentType: false,
                        cache: false,
                        processData: false,
                        success:function(dd) {
                            console.log('log: ' + dd);
                        }
                    });

                }, false);

                function previewImgs(event) {
                    totalFiles = imgUpload.files.length;

                    if(!!totalFiles) {
                        imgPreview.classList.remove('quote-imgs-thumbs--hidden');
                        previewTitle = document.createElement('p');
                        previewTitle.style.fontWeight = 'bold';
                        //previewTitleText = document.createTextNode(totalFiles + ' Ваш документ.');
                        previewTitleText = document.createTextNode('Загруженные документы.');
                        previewTitle.appendChild(previewTitleText);
                        imgPreview.appendChild(previewTitle);
                    }

                    for(var i = 0; i < totalFiles; i++) {
                        img = document.createElement('img');
                        img.src = URL.createObjectURL(event.target.files[i]);
                        img.classList.add('img-preview-thumb');
                        imgPreview.appendChild(img);
                    }
                }
            </script>

Answer 1

Надеюсь я все верно понял. Сами картинки можно забрать с src имейджов.

$(function() {
  function readURL(input) {
    $(input.files).each(function(i, el) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $("#im").append(`<div class='d-flex'><img src=${e.target.result}><button class='remove'>X<\/button><\/div>`);
      };
      reader.readAsDataURL(input.files[i]);
    });
  }

  $("#imgInput").change(function() {
    readURL(this);
  });
  
  $("#im").on('click','.remove',function() {
    $(this).parent().remove();
  });
});

img {
  width: auto;
  height: 80px;
}

.d-flex {
  display: flex;
  margin-top: 1.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Добавить изображение(-я)</span><input type="file" name="bn" id="imgInput" multiple>
<div id="im"></div>

Answer 2

Вот попробуйте на локальном сервере такой index.html и посмотрите что отправляется в запросе:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

    <form action="" id="img-upload-form" method="post" enctype="multipart/form-data">
        @csrf
        <p>
            <label for="upload_imgs" class="button hollow">Загрузите ваши фото +</label>
            <input style="display: none;" class="show-for-sr" type="file" id="upload_imgs" name="upload_imgs[]" multiple>
        </p>
        <div class="quote-imgs-thumbs quote-imgs-thumbs--hidden" id="img_preview" aria-live="polite"> 
        Тут отображается превью загруженных картинок. 
        </div>

        <button>Отправить</button>

    </form>

    <script>
        $(function () {
            $(".spoiler").hide();

            $(".spoiler-link").on("click", function (e) {
                var idSpoiler = $(this).attr("href"),
                    classSelect = "spoiler-link--active";

                $(this).toggleClass(classSelect);
                $(idSpoiler).slideToggle(200);

                e.preventDefault();
            });
        });


        var imgUpload = document.getElementById('upload_imgs')
            , imgPreview = document.getElementById('img_preview')
            , imgUploadForm = document.getElementById('img-upload-form')
            , totalFiles
            , previewTitle
            , previewTitleText
            , img;

        var formData = new FormData();
        var filesArray = [];

        imgUpload.addEventListener('change', previewImgs, false);
        imgUploadForm.addEventListener('submit', function (e) {
            e.preventDefault();
            alert('Images Uploaded! (not really, but it would if this was on your website)');

            filesArray.forEach(( file, index )=> formData.set( `upload_imgs[${index}]`, file ) );


            $.ajax({
                url: $(this).attr('action'),
                method: "POST",
                data: formData,
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success:function(dd) {
                    console.log('log: ' + dd);
                }
            });

        }, false);

        function previewImgs(event) {
                Array.from(imgUpload.files).forEach( file => filesArray.push( file ) );


            totalFiles = imgUpload.files.length;

            if(!!totalFiles) {
                imgPreview.classList.remove('quote-imgs-thumbs--hidden');
                previewTitle = document.createElement('p');
                previewTitle.style.fontWeight = 'bold';
                //previewTitleText = document.createTextNode(totalFiles + ' Ваш документ.');
                previewTitleText = document.createTextNode('Загруженные документы.');
                previewTitle.appendChild(previewTitleText);
                imgPreview.appendChild(previewTitle);
            }

            for(var i = 0; i < totalFiles; i++) {
                img = document.createElement('img');
                img.src = URL.createObjectURL(event.target.files[i]);
                img.classList.add('img-preview-thumb');
                imgPreview.appendChild(img);
            }
        }
    </script>

</body>
</html>

Тут FormData составляется полностью самостоятельно, а не созданием лишних полей формы.

Answer 3

Спустя 21 час страдания проблема была решена таким образом.

var data = new FormData();

    $('#upload_imgs').change(function(ev) {
        $.each(ev.currentTarget.files, function (key, value) {
                data.append('files[]', value);
        });
    });

$.ajax({
    url: $(this).attr('action'),
    method: "POST",
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    data: data,
    contentType: false,
    cache: false,
    processData: false,
    success:function() {
        console.log('log: ', data);
    }
});

БЛОГ НА HUSL

Дозагрузка картинок через один input

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