How to Handle Multiple File Uploads with PHP, jQuery, and AJAX?

Handling Multiple File Upload with PHP, jQuery, and AJAX

In this post, we will explore how to effectively handle multiple file uploads using PHP, jQuery, and AJAX. We will break down the process into three steps: preparing the form, adding the functionality using jQuery, and processing the file upload.

Preparing the Form

Begin by creating an HTML form that includes multiple file browse buttons. Each file input should have the name attribute set to file[], indicating that it can handle an array of files. Include a button for form submission.

Adding the jQuery Functionality

Leverage jQuery to add the functionality for adding additional file browse buttons. Implement a click handler for the "Add More Files" button that dynamically adds new file input elements to the form.

Processing the File Upload

In the PHP script, we process the file upload. Use a loop to iterate through each file in the $_FILES['file'] array. The target path for the uploaded file is generated uniquely to prevent overwrites. After the file is moved to the target path, return a success or error message.

Submitting the Form using AJAX

To submit the form via AJAX, use the following code:

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            alert("Data Uploaded: "+data);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

This function binds a click handler to the "Upload File" button, creates a FormData object containing the form data, sends an AJAX request to upload.php, handles the server response, and prevents the default form submission.

The above is the detailed content of How to Handle Multiple File Uploads with PHP, jQuery, and AJAX?. For more information, please follow other related articles on the PHP Chinese website!