How to Upload Multiple Files Using jQuery, AJAX, and PHP?

Uploading Multiple Files with jQuery, AJAX, and PHP

Introduction

Uploading multiple files from a web form to a server is a common task in web development. In this article, we will guide you through the process of uploading multiple files using PHP, jQuery, and AJAX.

Form Design

The first step is to create a form that allows users to select and upload files. The following HTML markup represents a simple form that initially contains one file input field:

<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">

jQuery for Adding More Files

To allow users to upload multiple files, we'll use jQuery to dynamically add additional file input fields when the "Add More Files" button is clicked:

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

PHP File Handling

The form action attribute is set to "upload.php", which is the PHP script that will handle the file upload. Here's an example of the PHP code:

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 for Submitting the Form

To submit the form using AJAX, we'll use jQuery's .submit() and .ajax() methods:

$('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;
});

By using this code, you can dynamically create file input fields, handle file uploads on the server-side with PHP, and submit the form asynchronously using AJAX, allowing for multiple file uploads without reloading the page.

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