Как реализовать отправку файлов с помощью сериализации ajax?

Question

[nailpaw]

Здравствуйте, сделал форму, через ajax на php обработчик текст передает без проблем, а вот картинку в обработчике не видит, если убрать ajax запрос и делать с помощью action все работает, но мне нужен именно ajax serialize.

Код аякс:

<script>
                        function formGet() {
                            var dar   = $('#formCom').serialize();
                            $.ajax({
                                type: 'post',
                                url: 'тут юрл',
                                data: dar,
                                success: function(data) {
                                    $('#form').html(data);
                                },
                                error:  function(xhr, str){
                                    alert('Возникла ошибка: ' + xhr.responseCode);
                                }
                            });
                        }
                    </script>

сама форма:

<form method="post" id="formCom" enctype="multipart/form-data">
<textarea name="textForm" ></textarea>
<input type="file" id="ipfile" name="inputfile">
<input type="button" onclick='formGet();' value="Оставить форму">
</form>

обработчик var_dump($_FILES) . '' . var_dump($_POST);

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

Comments

[Дмитрий]

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

[Алексей Горбунов]

https://developer.mozilla.org/en-US/docs/Web/API/F...

Примеры
https://www.javascripture.com/FileReader

[nailpaw]

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

[nailpaw]

Может есть вариант, как передать 2 переменные обработчику? Где одна - это файлы, а 2 данные?

[Дмитрий]

nailpaw, смотрите пример внимательней.

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

[nailpaw]

Дмитрий, этот способ не подходит, так как рейтинг (выбор звезд перестает работать), выбираю допустим 4, показывает всегда 1.

Пример: input type='radio' , выбираю значение 3, показывает 1

[Дмитрий]

nailpaw, это не способ не подходит, а просто Вы не знаете, как доработать под свои нужды код.
Я показал пример, как собрать данные с формы, взять файл(ы) и всё это отправить на сервер. В нём нет, как обработать данные из radio, это Вы сделайте сами.
Тем более, где в Вашем коде поле типа radio?

Answer 1

[Михаил Ушенин]

Видимо, вам нужно https://stackoverflow.com/a/8244082:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});