Question

I already have the HTML and CSS set up for my form, and I have my Ajax call in place to submit it but I can’t figure out how to send the images along. Here’s my Ajax call:

$.ajax
    ({
      type: "POST",
      url: "/manage/processadditem",
      data: $("#add_form").serialize(),
      dataType: "html",
      success: function( response, textStatus, XHR )
      {
        //Process return data

      },
      error: function(jqXHR, textStatus, errorThrown){
        alert('An error occurred, please try again later.');
      }
    });

My problem is that there are 3 image inputs on the form, but I’ll only use up to two of them at any given time, and one of the variables in the form tells me which ones I’m working with (gender=male/female/neutral).

In the success callback I would like to either examine that variable and decide which pictures to send along based on it, or send the variable along with the images to process in the back end, but looking through links on similar questions I haven’t been able to find any examples of selectively sending files or sending additional information with them.

Answer 1

As far as i know you can not send files with a AJAX Post request.

i have tried myself.

It´s because the file data is not in the POST headers that is sent to the URL target.