Submitting multipart/form-data using jQuery and Ajax

You should read up on the Jquery Ajax documentation.

I will elaborate on the two of the important ones for multi-part forms.

contentType and processData are needed when passing multi-part forms as when one sets the contentType option to false, it forces jQuery to remove the Content-Type header, otherwise, the boundary string will be missing from it. Also, when submitting files via multi-part/form one must leave the processData flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

Hey Kamal, are you trying to pass the form data to a page on your same domain, different domain, or sub-domain?

What browser are you testing this in?

Do you have size restrictions on your server for $_POST variables?

Hey Zitar, you could use the "reset" function during Ajax's success function.

Example:

  $.ajax({
    /* other junk here from above, cut out to save space */
    success: function (returndata) {
      //obviously change the #data to your form's id
      $("form#data")[0].reset();
    }
  });

Hey Rodney,

I'm not quite sure what you are doing as the code above only fires once the submit button for form id "data" is clicked.
If your form is auto submitting, check your code to see if you have any page load functions triggering your form to submit.

If you have a PHP variable that you want your form to submit, you can add another field to hold that variable.

Example:

<form id="data">
  <input type="hidden" name="phpVar1" value="<?=$somephpvariable?>" readonly="readonly">
  <input type="hidden" name="phpVar2" value="<?=$someotherphpvariable?>" readonly="readonly">
  <input type="hidden" name="id" value="123" readonly="readonly">
  User Name: <input type="text" name="username" value=""><br />
  Profile Image: <input name="profileImg[]" type="file" /><br />
  Display Image: <input name="displayImg[]" type="file" /><br />
  <input type="submit" value="Submit">
</form>

If you didn't want to pass the PHP variables via the form, then you should look into $_SESSION variables.

You could submit any number of forms simply by calling the object with jQuery and then using the submit function. So, if you wanted to automatically submit another form after the first one has completed, add the jQuery submit() trigger to the Ajax success function, like so:

$("form#data").submit(function(event){
 
  ...
 
  $.ajax({
    ...
    success: function (returndata) {
      //after ajax returned successful, submit form id "data2", then "data3"
      $("form#data2").submit();
      $("form#data3").submit();
    }
  });
 
  return false;
});

After my original form was submitted, I then submit forms "data2" and "data3". You would probably want to create custom form handlers for those forms like you did for form id "data" in my example above.

If you already have an image on the page that your form is updating, you would call the object by its ID and change its source with the uploaded image's source.

  <img id="profileImage" src="images/user/profile.jpg">

  $.ajax({
    /* other junk here from above, cut out to save space */
    success: function (returnImgSrc) {
      $('#profileImage').attr('src', 'images/user/'+returnImgSrc);
    }
  });

You would need to have your PHP processing page ONLY return the new image's path.

  //return the path and image name
  echo 'newprofilepic.jpg';

I personally like to return errors if they should exists to my ajax function. I personally would go about it like this.

  $.ajax({
    /* other junk here from above, cut out to save space */
    success: function (returnData) {
      if (returnData) {
        //alert user to uploading error
        alert('Error: '+returnData);
      }
      else {
        //no error, call function to load uploaded image
        updateImage();
      }
    }
  });
 
  function updateImage() {
    //use ajax to query the new image's link and return it
    $.ajax({
      /* other junk here from above, cut out to save space */
      success: function (returnImgSrc) {      
        //on success, update your image's src
        $('#profileImage').attr('src', 'images/user/'+returnImgSrc);
      }
    });
  }

If you need help with processing uploaded files/images, I would suggest checking out my other post, Simple PHP Class used for uploading files and images.

The following should do the trick.

//grab all form data  
var formData = new FormData($(this)[0]);
 
//add other inputs to formData
//formData.append("key", "value")
 
formData.append("other-input-id", $("#other-input-id").val());

You can have the database store the path to the uploaded file OR you can have the database store the actual file itself as BLOB type.

I would personally store the uploaded file in a directory opposed to in the database itself, but if you insist on storing the file in the database, you would do something like the following:

$imageName = $profileImg["name"];
$imageData = file_get_contents($profileImg["tmp_name"]);
 
$sth = $pdo->prepare('INSERT INTO image (name,image) VALUES (:name,:image)');
$sth->bindParam(':name', $imageName, PDO::PARAM_STR);
$sth->bindParam(':image', $imageData, PDO::PARAM_LOB);
$sth->execute();

Hey Victor, you will need to make one by either changing the alert in the success of $.ajax to something like:

$.ajax({
    ...
    success: function () {
      alert("Upload Complete");
    }
    ...

Or, if you wanted to return a message from your processing page, you will need to have your form processing page return a value by using echo or print.

//formprocessing.php
 
echo 'This page received:';
print_r($_POST);

$.ajax({
    ...
    success: function (returnedData) {
      alert(returnedData);
    }
    ...

Unfortunately you can't, see Mozilla's documentaion on "Using FormData Objects". You can only use them for building FormData to send via an AJAX request.

Some people posted some work arounds by building their own object. If you would like to try some of those on Stack Overflow.