Почему Ajax не отправляет файлы?

Question

[ruslanbm29]

Пишу для себя скрипт наполнения. Хочется сделать форму AJAX возможностью загрузки нескольких изображений. Я правда в нем вообще не разбираюсь, но нужно сделать. Что поправить в коде? Тыкните пальцем куда и что дописать или переписать.

Код приведенный ниже отправляет все значения из формы кроме изображений. В google chrome консоле показывает что все поля отправлены и скрипт их получает - записывает в базу, а вот сами изображения не приходят images[] - файл может быть выбран как один так и несколько. Если убираю отправку при помощи Ajax и ставлю напрямую то изображения присылаются

<form  method="post" name="1-form" id="1-form" enctype="multipart/form-data" action="">
<input name="name" value="" type="text" value="" size="30" aria-required="true">
<input name="title" value="" type="text" size="30" aria-required="true">
<textarea name="descr" id="comments" cols="45" rows="8" aria-required="true"></textarea>    
<input type="file" multiple name="images[]" class="f_input" accept="image/*">
<input name="submit" id="btn" type="submit" value="Ответить">
</form>

$( document ).ready(function() {
    $("#btn").click(
		function(){
			sendAjaxForm('result_form','1-form', '/content/ajax/add.php');
			return false; 
		}
	);
});

function sendAjaxForm(result_form, tool_form, url) {

    $.ajax(url,{
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        cache: false,
        data: $("#"+tool_form).serialize(),  // Сеарилизуем объект
        
        success: function(response) { //Данные отправлены успешно
        	result = $.parseJSON(response);
        	$('.commentlist').append(result.result_text);
        	
        	if(result.message) $('.count_result').html(result.message);
        	else if(result.error) $('.count_result').html(result.error);
    	},
    	error: function(response) { // Данные не отправлены
            $('.result_form').html('Ошибка. Данные не отправлены.');
    	}
 	});
}

Answer 1

[Евгений Вольф]

Почему Ajax не отправляет файлы?

По тому, что файлы в форме не сериализуются. Для отправки файлов можно использовать FormData, можно поискать тут, уже готовые решения, так же можно воспользоваться поиском и найти ответ по первой попавшейся ссылке.

Answer 2

[Дмитрий]

Доброе утро.
Как загрузить изображение на сервер через AJAX?

Comments

[ruslanbm29]

Ваш вариант работает, но он отправляет только 1 первый файл, как отправить multiple - несколько выбранных файлов

<input type="file" id="dwn_images" multiple name="images[]" class="f_input" accept="image/*">

Если можно код пришлите
Вот так у меня:

$( document ).ready(function() {
    $('#dle-comments-form').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 = '/content/ajax/addotvet.php';

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                contentType: false,
                cache: false, 
                processData:false, 
                success: function(response) { //Данные отправлены успешно
                	result = $.parseJSON(response);
                	$('.commentlist').append(result.result_text);
                	
                	if(result.error) $('.error_otvet').html(result.error);
            	},
            	error: function(response) { // Данные не отправлены
                    $('.result_form').html('Ошибка. Данные не отправлены.');
            	}         
            });  
        });    
});

[Дмитрий]

ruslanbm29, а зачем Вы скопировали весь код в комментарий?)))
Вы читали комментарии в коде?

// Сбор данных о файле (будет немного отличаться для нескольких файлов)

Это значит, что надо в цикле собирать файлы. Подумайте и немного измените код.

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

[Дмитрий]

ruslanbm29, вот как-то так.

var filesField = form.find('input[type="file"]');
var fileName = filesField.attr('name');
for(var i = 0; i < filesField.prop('files').length; i++){
     var file = filesField.prop('files')[i];
     data.append(fileName, file) ;
}

[ruslanbm29]

Дмитрий, да благодарю

[Дмитрий]

ruslanbm29, пожалуйста.