объект formData не работает с jQuery AJAX post?

позволяет перейти прямо в код : 

var formData = new FormData();

formData.append('name', dogName);
formData.append('weight', dogWeight);
formData.append('activity', dogActivity);
formData.append('age', dogAge);
formData.append('file', document.getElementById("dogImg").files[0]);
console.log(formData);

здесь я добавляю некоторые строки и один файловый объект к объекту formData, чтобы отправить всю информацию асинхронно на сервер.

сразу после этого у меня есть этот запрос jQuery ajax:

$.ajax({
  type: "POST",
  url: "/foodoo/index.php?method=insertNewDog",
  data: formData,
  processData: false,
  contentType: false,
  success: function(response){
     console.log(response);
  },
  error: function(){
  }
});

Итак, здесь я пытаюсь опубликовать информацию на сервере, на php-файле сервера у меня есть простой print_r сообщения, поэтому я вижу, что проходит, а что нет.

к сожалению, мой ответ в консоли.журнал (данные) пуст.

также, если вы проверите заголовок на вкладке Сеть, вы получите следующий пустой вывод:

enter image description here

функция успеха вызывается (только для уточнения)

10
ajax form-data javascript jquery

3 ответов

когда вы отправляете запрос ajax через jQuery и хотите отправить FormData, вам не нужно использовать JSON.stringify на этой FormData. Кроме того, при отправке файла тип содержимого должен быть multipart/form-data в том числе boundry - что-то вроде этого multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

поэтому для отправки FormData, включая некоторый файл через jQuery ajax, вам нужно:

  • Set data в FormData без каких-либо изменений.
  • Set processData to false (позволяет предотвратить jQuery от автоматическое преобразование данных в строку запроса).
  • установить contentType to false (это необходимо, потому что в противном случае jQuery установит его неправильно).

ваш запрос должен выглядеть так:

var formData = new FormData();

formData.append('name', dogName);
// ... 
formData.append('file', document.getElementById("dogImg").files[0]);


$.ajax({
    type: "POST",
    url: "/foodoo/index.php?method=insertNewDog",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    },
    error: function(errResponse) {
        console.log(errResponse);
    }
});
14

если вы сделали точно так же pervious anwswer и до сих пор не работает не волнуйся its working

может быть intelligence and quick wath рассказываем вам его not working

enter image description here

но не волнуйтесь, посмотри network tap enter image description here

его работает

надеюсь, что это экономит ваше время

4
//For those who use plain javascript

var form = document.getElementById('registration-form'); //id of form
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST','form.php',true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
//if you have included the setRequestHeader remove that line as you need the 
// multipart/form-data as content type.
xhr.onload = function(){
 console.log(xhr.responseText);
}
xhr.send(formdata);
0