Comment implémenter un téléchargeur multi-fichiers à l'aide de PHP, jQuery et AJAX ?

Comment implémenter un téléchargeur de fichiers avec plusieurs fichiers à l'aide de PHP, jQuery et AJAX

Pour un formulaire de téléchargement de fichiers permettant la sélection de plusieurs fichiers , les utilisateurs cliquent généralement sur un bouton « Ajouter plus de fichiers », ajoutant dynamiquement davantage de boutons « Parcourir ». Cette fonctionnalité peut être implémentée à l'aide de jQuery et AJAX pour soumettre le formulaire et gérer le téléchargement de fichiers à distance.

Configuration initiale

Créez initialement un formulaire HTML avec un bouton « Parcourir » . Incluez un bouton « Ajouter plus de fichiers » pour ajouter dynamiquement plus de boutons « Parcourir » si nécessaire. Voici la structure HTML initiale :

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button">

Ajoutez un gestionnaire de fonctions JavaScript pour le bouton "Ajouter plus de fichiers" afin d'ajouter dynamiquement des entrées de téléchargement de fichiers supplémentaires :

$(document).ready(function() {
    $('.add_more').click(function(e) {
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

Implémentez le côté serveur logique de gestion du téléchargement de fichiers dans un fichier PHP séparé ("upload.php") :

for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

AJAX Implémentation

Pour soumettre le formulaire via AJAX, modifiez le gestionnaire de clic jQuery pour le bouton "Télécharger le fichier" comme suit :

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            alert("Data Uploaded: "+data);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

Ce code crée un objet FormData à partir du formulaire données, définit les options AJAX appropriées et soumet le formulaire. La réponse du serveur (dans ce cas, un simple message de confirmation) est affichée dans une boîte de dialogue d'alerte.

Avec ces modifications, votre formulaire sera soumis dynamiquement en utilisant AJAX, permettant à l'utilisateur de télécharger plusieurs fichiers à la fois.

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!