Как передать файл с помощью ajax, из массива $_FILES?

Question

[Дмитрий Поляков]

Как ajax-ом передать массив $_FILES, в гугле не нашел подходящего варианта. У меня такая отправка:

$.ajax({
		url: '/include/form_ajax.php',
		type: 'POST',
		dataType: 'html',
		data: send,
        processData: false,
        contentType: false,

Объект send:

var send = {
				'ajx':'<?=$formId?>',//'demo<?//=$formId?>', // strict cuz 3 form id's call use same template: loader, joule, module
		'name':BX(name).value,
		'phone':BX(phone).value,
                'equipment':BX(equipment).value,
                'serial_number':BX(serial_number).value,
                'email':BX(email).value,
                'text':BX(text).value,
                'file':BX(file).files,
		'consid':'<?=$arParams["USER_CONSENT_ID"]?>'
			};

В объекте файл есть, но потом jq выдает ошибку:

Answer 1

[Дмитрий]

Добрый день.
Для отправки файла при помощи ajax используйте FORMDATA

Comments

[Дмитрий Поляков]

Написал проверочный код:

$('.button').on('click', function(){
        var sendData = new FormData(); 
            sendData.append('ajx', 'ajx');
            console.log(sendData);
    
 			send_form(sendData, '<?=$formId?>');
});

function send_form(send, container_id) {
    
	$.ajax({
		url: '/include/form_ajax.php',
		type: 'POST',
		dataType: 'JSON',
		data: send,
        processData: false,
        contentType: false,
        ...

и опять выдает такой результат:

[Дмитрий]

Дмитрий Поляков, вот Вам пример отправки данных из формы и файла. Переделайте под свои нужды.

$(function() {
        $('#form-data').on('submit', function(e){
            e.preventDefault()
            var form = $(this); // Предположу, что этот код выполняется в обработчике события 'submit' формы
            var data = new FormData();  // Для отправки файлов понадобится объект FormData. Подробнее про него можно прочитать в документации - https://developer.mozilla.org/en-US/docs/Web/API/FormData

            // Сбор данных из обычных полей
            form.find(':input[name]').not('[type="file"]').each(function() { 
                var field = $(this);
                data.append(field.attr('name'), field.val());
            });

            // Сбор данных о файле (будет немного отличаться для нескольких файлов)
            var filesField = form.find('input[type="file"]');
            var fileName = filesField.attr('name');
            var file = filesField.prop('files')[0];
            data.append(fileName, file) ;

            // Отправка данных
            var url = 'upload.php';

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

[Дмитрий Поляков]

slo_nik, Спасибо!

[Дмитрий]

Дмитрий Поляков, пожалуйста. Если помог - отмечайте решением.

Answer 2

[makinggood]

Проблема РЕШЕНА! Как с Ajax отправить файл через POST?

Comments

[Дмитрий Поляков]

Дело в том, что сама форма не обернута в контейнер form и .serialize() использовать не получится