Maison > interface Web > js tutoriel > Comment télécharger plusieurs images à l'aide d'AJAX, PHP et jQuery ?

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

Linda Hamilton
Libérer: 2024-12-13 03:04:09
original
516 Les gens l'ont consulté

How to Upload Multiple Images Using AJAX, PHP, and 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.

<form>
Copier après la connexion

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 <= 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">
Copier après la connexion

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;
    }
?>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal