How to Implement a Multi-File Uploader Using PHP, jQuery, and AJAX?

How to Implement File Uploader with Multiple Files Using PHP, jQuery, and AJAX

For a file upload form to enable multi-file selection, users typically click an "Add More Files" button, dynamically adding more 'browse' buttons. This functionality can be implemented using jQuery and AJAX to submit the form and handle file upload remotely.

Initial Setup

Create an HTML form with one 'browse' button initially. Include a "Add More Files" button to dynamically add more 'browse' buttons as needed. Here's the initial HTML structure:

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button">

Add a JavaScript function handler for the "Add More Files" button to add additional file upload inputs dynamically:

$(document).ready(function() {
    $('.add_more').click(function(e) {
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

Implement the server-side file upload handling logic in a separate PHP file ('upload.php'):

for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

AJAX Implementation

To submit the form via AJAX, modify the jQuery click handler for the "Upload File" button as follows:

$('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 code creates a FormData object from the form data, sets the appropriate AJAX options, and submits the form. The server response (in this case, a simple confirmation message) is displayed in an alert dialog.

With these modifications, your form will submit dynamically using AJAX, allowing the user to upload multiple files at once.

The above is the detailed content of How to Implement a Multi-File Uploader Using PHP, jQuery, and AJAX?. For more information, please follow other related articles on the PHP Chinese website!