Question

I understand that it is not possible to upload files using a regular Ajax call, so I would like to simulate the process using a jQuery file upload plugin. I have a form that allows users to enter data for an item that has 3 file inputs named male_image, female_image, and neutral_image. I would like to upload the files in all 3 inputs in the success callback of my Ajax call.

$.ajax({
      type: "POST",
      url: "/manage/processadditem",
      data:  $("#add_form").serialize(),
      dataType: "html",
      success: function( response, textStatus, XHR )
      {
        if(response.indexOf('invalid') >= 0 || response.indexOf('Exception') >= 0){
            //Show them their errors
            alert(response);
        }
        else{
            //Data was good
            //Upload male_/female_/neutral_image to /manage/items/itemimage
            //for further processing
        }

      }
    });

I already have the code set up on the back side to handle the images, I just need to get them there. All of the multiple file input plugins I can find seem to handle sending multiple files from a single input. How can I send from multiple file inputs each with a single file so I can tell them apart on the back end?

Answer 1

you can use this jquery upload and upload multiple files, the example is very easy