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

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

Dans cette discussion, la question du téléchargement de plusieurs images à l'aide des techniques AJAX est abordée. L'utilisateur décrit avoir rencontré des difficultés lors de la transmission de plusieurs fichiers via AJAX, entraînant une livraison incomplète des fichiers. Cet article fournit une solution complète qui exploite JSON pour traiter efficacement l'objet fichier et faciliter le téléchargement réussi.

HTML

Le code HTML suivant établit la structure de la page Web. , y compris des éléments pour la fonctionnalité glisser-déposer, la saisie du fichier et des sections pour afficher la progression du téléchargement et résultats :

<div>

CSS

Le style est appliqué pour améliorer l'interface utilisateur et fournir des repères visuels pendant le processus de téléchargement de fichiers :

#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

Le code JavaScript gère le processus de téléchargement de fichiers, en tirant parti d'AJAX pour communiquer avec le serveur. Il utilise JSON pour encapsuler les données du fichier et des techniques HTML5 pour le suivi de la progression :

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

    // process file object
    $.each(This.files, function (i, file) {
        var reader = new FileReader(),
            dfd = new $.Deferred();
        reader.onload = function (e) {
            // convert file to data URL
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        dfd.then(function (data) {
            // send file data using AJAX
            $.ajax({
                url: "/echo/json/",
                type: "POST",
                data: {
                    "file": JSON.stringify({
                        "file": data,
                        "name": file.name,
                        "size": file.size,
                        "type": file.type
                    })
                }
            })
            .then(function (data, textStatus, jqxhr) {
                console.log(data)
                display.append("<br /><li>", img, "</li><br />");
                return data
            }, function (jqxhr, textStatus, errorThrown) {
                console.log(errorThrown);
                return errorThrown
            });
        })
    });
});

PHP

Le script PHP reçoit les données du fichier encodées au format JSON et les renvoie sous forme de chaîne JSON :

<?php
if (isset($_POST["file"])) {
    // process file object
    $file = json_encode($_POST["file"]);
    // return file as JSON string
    echo $file;
};
?>

En mettant en œuvre ces techniques, vous pouvez télécharger efficacement plusieurs images à l'aide d'AJAX, PHP et jQuery. L'approche JSON simplifie la transmission des fichiers et l'utilisation du suivi de la progression améliore l'expérience utilisateur en fournissant des commentaires en temps réel sur l'état du téléchargement.

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!