Как отправить аватар вместе с формой регистрации через AJAX?

Question

[Посторонним В.]

У меня есть обычный post запрос для формы регистрации:

function tryToRegister(login_window) {
    var name = $('[name="name"]').val();
    var password = $('[name="password"]').val();
    var password_confirmation = $('[name="password_confirmation"]').val();
    var email = $('[name="email"]').val();
    var recaptcha = grecaptcha.getResponse();
    var _token = $('[name="_token"]').val();
    $.post('/register', {
        'name': name,
        'password_confirmation': password_confirmation,
        'email': email,
        'password': password,
        'g-recaptcha-response': recaptcha,
        '_token': _token
    }, function (data) {
         // if ok
    }).fail(function (xhr, status, error) {
           // if error
    });
}

Но в этой форме есть ещё загрузка файла:

<input type="file" name="avatar" class="registration-form__avatar__uploader__input">

Я никак не пойму, как мне прикрутить к данным AJAX ещё и картинку аватара, чтобы потом считать её в PHP как обычно из массива $_FILES. Везде, где описана загрузка файлов по AJAX - именно отдельно загрузка файлов или загрузка сразу при выборе файла, а мне нужно отправить файл вместе с формой, одним запросом, одному скрипту.

P. S. Прошу не судить строго, я бекэндщик, которому пришлось писать фронт.

Answer 1

[Дмитрий]

Добрый вечер.
Просто так загрузить изображение через ajax не получится.
Используйте FormData и всё у Вас получится.

p.s.
Приблизительно так:

function Testing(url, form){
	    var file = '';
		var formdata = new FormData(form[0]);
		formdata.forEach(function(item, i, arr){
			console.log(i + ': ' + item + " array: " + arr)
			if(i == 'files'){
				formdata.append(item.name, item)
			}
		})

        $.ajax({
        	url: url,
        	type: 'POST',
        	processData: false,
            contentType: false,
        	data: formdata,
        	success: function(data){
        		console.log(data)
        	}
        })
	}

	$('#form-data').on('submit', function(e){
		e.preventDefault();
		var files = $(this).find('input:file')
		Testing('upload.php', $(this))
	})

Comments

[Посторонним В.]

Спасибо, formData спас. Но вроде всё как-то проще - зачем у вас цикл и find?. Вот моя функция, которая всё отправляет что я хотел:

function tryToRegister(login_window) {
    var form = $('.registration-form')[0];
    var formData = new FormData(form);
    formData.append('g-recaptcha-response', grecaptcha.getResponse());

    $.ajax({
        url: $(form).attr('action'),
        type: 'POST',
        data: formData,
        async: true,
        success: function (data) {
            console.log(data)
            //login_window.className += '_success';
            //location.reload(true);
        },
        cache: false,
        contentType: false,
        processData: false
    });
}

[Дмитрий]

Посторонним В., цикл остался не помню после чего), но в данной ситуации это не главное.

[Дмитрий]

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