send data form file with ajax

Question

I use the below code to send data for image file with js and they works great but when I add

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

I get error with append.

This my code

$("#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!");
        }
      }
    });
   //}
 });

Post html please. If the structure is what I think it is you have made your code overly complicated. — ksealey
– ksealey, Commented Jun 17, 2016 at 14:57
@MouradKa I understand, but if all your elements you are getting the values from are in the form, you are writing quite a bit of extra code. I'm trying to save you some time and debugging frustrations in the future. — ksealey
– ksealey, Commented Jun 17, 2016 at 15:04

Musa · Accepted Answer · 2016-06-17 14:57:29Z

1

You have to append all the parameters to the formdata object, or more easily pass the form containing the data to the from data constructor.

Then pass the formdata object alone in the request, also contentType and processData has to be set to false.

answered Jun 17, 2016 at 14:57

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ksealey Over a year ago

In your ajax call add the properties processData: false, contentType: false,

Musa Over a year ago

If all the data is in a form just do var form = new FormData($("#formid")[0]); then data: form,

Collectives™ on Stack Overflow

send data form file with ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related