отправить данные форма файл с помощью AJAX

Question

Я использую следующий код для отправки данных для файла изображения с JS и они отлично работают, но когда я добавляю

var image = document.getElementById("img_book").files[0]; 
var form = new FormData(); 
form.append("image", image); 

я получаю сообщение об ошибке с добавлением.

Это мой код

$("#publish").click(function() { 
    var x = event.target.responseText; 
    document.getElementById("book_id").setAttribute("value",x); 
    var image = document.getElementById("img_book").files[0]; 
    var form = new FormData(); 
    form.append("image", image); 

    var title = document.getElementById("title").value; 
    var desc = document.getElementById("desc").value; 
    var cat = document.getElementById("cat").value; 
    var sub_cat = document.getElementById("sub_cat").value; 
    var tags = document.getElementById("tags").value; 
    var lang = document.getElementById("lang").value; 
    var privacy = document.getElementById("privacy").value; 
    var id = document.getElementById("book_id").value; 
    //if((title !== "") && (desc !== "") && (cat !== "") && (sub_cat !== "") && (lang !== "") && (privacy !== "")) { 
    $.ajax({ 
     url: "ajax/upload/publish.php", 
     method : "POST", 
     data : {'form' : form ,'title' : title,'desc' : desc, 'cat' : cat , 'sub_cat' : sub_cat , 'tags' : tags , 'lang' : lang , 'privacy' : privacy , 'id' : id}, 
     cache: true, 
     success : function(data) { 
     if(data.status == 'success'){ 
      window.location.replace("http://localhost/book/book.php?id=" + id); 
     }else if(data.status == 'error'){ 
      alert("Error on query!"); 
     } 
     } 
    }); 
    //} 
}); 

Answer 1

Вы должны приложить все параметры к FormData объекта, или более легко передать форму, содержащую данные в из конструктора данных.

Затем передайте объект formdata самостоятельно в запросе, а для contentType и processData должно быть установлено значение false.