Я хотел бы отправить несколько файлов изображений с 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?