Comment télécharger plusieurs images à l'aide d'AJAX, PHP et jQuery ?

Télécharger plusieurs images à l'aide d'AJAX, PHP et jQuery

Télécharger plusieurs images à l'aide d'AJAX peut être difficile si vous n'êtes pas familier avec le processus. Cet article vous guidera à travers les étapes à suivre, en mettant en évidence les composants clés du code HTML, jQuery/AJAX et PHP. Nous fournirons également un exemple de code fonctionnel pour illustrer la solution.

HTML

Le code HTML définit le formulaire dans lequel les utilisateurs peuvent sélectionner plusieurs images à télécharger. Il contient un champ de saisie avec l'attribut multiple, qui permet aux utilisateurs de sélectionner plusieurs images à la fois. Nous ajouterons également une barre de progression pour chaque fichier pour indiquer l'état du téléchargement.

jQuery/AJAX

Le code jQuery/AJAX gère le téléchargement du fichier. processus. Nous utilisons l'événement change pour déclencher le téléchargement lorsque l'utilisateur sélectionne les fichiers. Nous parcourons ensuite chaque fichier sélectionné, créant une nouvelle barre de progression pour chaque fichier.

$(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  div")
                    .attr({"aria-valuenow":perc})
                        .css("width", perc+"%");
                }
            }
            // display list of files
            display.append('

'+name+'

PHP

Enfin, le code PHP gère le téléchargement du fichier sur le côté serveur. Il reçoit les fichiers téléchargés et les traite.

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

En combinant ces composants, nous pouvons réaliser le téléchargement de plusieurs images en utilisant AJAX, PHP et jQuery. Cette fonctionnalité permet aux utilisateurs de télécharger facilement plusieurs images à la fois, améliorant ainsi l'expérience utilisateur et rationalisant le processus de téléchargement de fichiers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!