How Can I Upload Data and Files Simultaneously Using Ajax?

Uploading Both Data and Files in One Form Using Ajax

Uploading both data and files in one Ajax form is a common requirement in web applications. Here's a detailed explanation on how to achieve this task effectively.

The Problem

Trying to submit both data and files using Ajax can be tricky due to the different ways they are handled by jQuery. While $.serialize() gathers data into an array, form files require the use of new FormData().

Combining the Methods

The key to merging these methods is using the FormData object. FormData is a built-in constructor that allows you to create a form data object. This object can hold both data and files, making it ideal for our purpose.

Example

To combine the two methods, use the following code:

$("form#datafiles").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

In this case, the #datafiles form contains both regular data inputs and a file input. The new FormData(this) line creates a new FormData object with the form's data.

PHP Script

To handle the uploaded data and files on the server-side, use a PHP script like this:

<?php

print_r($_POST);
print_r($_FILES);

?>

With this code, you can access both the form data and uploaded files using the $_POST and $_FILES superglobals.

The above is the detailed content of How Can I Upload Data and Files Simultaneously Using Ajax?. For more information, please follow other related articles on the PHP Chinese website!