Загрузка изображения из html предварительного просмотра с ajax, jQuery и laravel - PullRequest
0 голосов
/ 29 февраля 2020

Я хотел бы отправить несколько файлов изображений с ajax на контроллер в одной форме после того, как пользователь получил предварительный просмотр. Файлы изображений не должны загружаться до тех пор, пока форма не будет отправлена.

поле ввода

<input class="hidden" type="file" name="image[]" id="supportrequestimageinput" accept="image/*" multiple>

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

$('body').on('change', '#supportrequestimageinput', function () {
        let total_file = document.getElementById("supportrequestimageinput").files.length;
        for (let i = 0; i < total_file; i++) {
            $("#supportrequestimagepreview").append('<div class="row col-md-4">\n' +
                '                                <img class="img-fluid" src="' + URL.createObjectURL(event.target.files[i]) + '" alt="">\n' +
                '                                <button type="button" class="m-0 btn btn-danger btn-xs btn-block">delete</button>\n' +
                '                            </div>')
        }
    });

Ajax функция

$('#supportRequestForm').on('submit', function(e, self = this){
        e.preventDefault();
        var formData = new FormData($(this)[0]);

        $.ajax({
            type: 'POST',
            url: '/url/url/url',
            data: formData,
            contentType: false,
            cache: false,
            processData: false,
            uploadProgress: function (event, position, total, percentComplete) {
                $('#supportrequestProgressBar').css('width', percentComplete + '%');
            },
            success: function (data) {
                $('#supportrequestProgressBar').css('width', '100%');
                _toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
                $('#supportRequestButton').prop('disabled', true);
            },
            error: function (xhqr, staus, message) {
                $('#supportrequestProgressBar').addClass('bg-red').css('width', '100%');
                var response = JSON.parse(xhqr.responseText);
                var errors = response.errors;
                for (var error_key in errors) {
                    var error = errors[error_key];
                    _toastr_new(error, "top-full-width", "error", false, '.toastr-notify', 0);
                }
            }
        })
    });

С помощью функции добавления я добавляю изображения в код html. Как я могу взять только изображения из файла html и отправить их на контроллер с существующим запросом ajax?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...