Uploading Multiple Images using AJAX, PHP, and jQuery

Uploading multiple images using AJAX can be challenging if you're not familiar with the process. This article will guide you through the steps involved, highlighting the key components of the HTML, jQuery/AJAX, and PHP code. We'll also provide a working code example to illustrate the solution.

HTML

The HTML code defines the form where users can select multiple images for upload. It contains an input field with the multiple attribute, which allows users to select more than one image at once. We'll also add a progress bar for each file to indicate the upload status.

<form>

jQuery/AJAX

The jQuery/AJAX code handles the file upload process. We use the change event to trigger the upload when the user selects the files. We then iterate over each selected file, creating a new progress bar for each file.

$(document).on("change", "input[name^='file']", function(e){
    e.preventDefault();
    var This    =   this,
        display =   $("#uploads");

    // list all file data
    $.each(This.files, function(i, obj){
        // for each image run script asynchronous
        (function(i) {
            // get data from input file
            var file = This.files[i],
                name = file.name,
                size = file.size,
                type = file.type,
                lastModified        =   file.lastModified,
                lastModifiedDate    =   file.lastModifiedDate,
                webkitRelativePath  =   file.webkitRelativePath,
                //slice               =   file.slice,
                i = i;

            // DEBUG
       /*
            var acc = []
            $.each(file, function(index, value) {
                acc.push(index + ": " + value);
            });
            alert(JSON.stringify(acc));
        */

            $.ajax({
                url:'/ajax/upload.php',
                contentType: "multipart/form-data",
                data:{
                        "image":
                        {
                            "name":name,
                            "size":size,
                            "type":type,
                            "lastModified":lastModified,
                            "lastModifiedDate":lastModifiedDate,
                            "webkitRelativePath":webkitRelativePath,
                            //"slice":slice,
                        }
                    },
                type: "POST",
                // Custom XMLHttpRequest
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    // Check if upload property exists
                    if(myXhr.upload)
                    {
                        // For handling the progress of the upload
                        myXhr.upload.addEventListener("progress",progressHandlingFunction, false); 
                    }
                    return myXhr;
                },
                cache: false,
                success : function(data){
                    // load ajax data
                    $("#listTable").append(data);
                }
            });
            // display progress
            function progressHandlingFunction(e){
                if(e.lengthComputable){
                    var perc = Math.round((e.loaded / e.total)*100);
                    perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) );
                $("#progress"+i+" > div")
                    .attr({"aria-valuenow":perc})
                        .css("width", perc+"%");
                }
            }
            // display list of files
            display.append('<li>'+name+'</li><div class="progress">

PHP

Finally, the PHP code handles the file upload on the server side. It receives the uploaded files and processes them.

<?php
    if (isset($_POST["image"])) {
        // do php stuff
        // call `json_encode` on `file` object
        $file = json_encode($_POST["file"]);
        // return `file` as `json` string
        echo $file;
    }
?>

Conclusion

Combining these components, we can achieve multiple image uploading using AJAX, PHP, and jQuery. This functionality allows users to conveniently upload multiple images at once, enhancing the user experience and streamlining the file upload process.

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