Maison > interface Web > js tutoriel > le corps du texte

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

Barbara Streisand
Libérer: 2024-11-24 18:20:14
original
836 Les gens l'ont consulté

How can I efficiently upload multiple images using AJAX, PHP, and 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>
Copier après la connexion

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

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

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

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!

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