Comment télécharger plusieurs fichiers à l'aide de jQuery, AJAX et PHP ?

Téléchargement de plusieurs fichiers avec jQuery, AJAX et PHP

Introduction

Téléchargement de plusieurs fichiers d'un formulaire Web vers un Le serveur est une tâche courante dans le développement Web. Dans cet article, nous vous guiderons tout au long du processus de téléchargement de plusieurs fichiers à l'aide de PHP, jQuery et AJAX.

Conception de formulaire

La première étape consiste à créer un formulaire qui permet aux utilisateurs de sélectionner et téléchargez des fichiers. Le balisage HTML suivant représente un formulaire simple qui contient initialement un champ de saisie de fichier :

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

jQuery pour ajouter plus de fichiers

Pour permettre aux utilisateurs de télécharger plusieurs fichiers, nous utiliserons jQuery pour ajoutez dynamiquement des champs de saisie de fichier supplémentaires lorsque vous cliquez sur le bouton "Ajouter plus de fichiers" :

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

Fichier PHP Gestion

L'attribut d'action du formulaire est défini sur "upload.php", qui est le script PHP qui gérera le téléchargement du fichier. Voici un exemple de code 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 pour soumettre le formulaire

Pour soumettre le formulaire en utilisant AJAX, nous utiliserons les méthodes .submit() et .ajax() de jQuery :

$('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;
});

En utilisant ce code, vous pouvez créer dynamiquement des champs de saisie de fichiers, gérer les téléchargements de fichiers côté serveur avec PHP et soumettez le formulaire de manière asynchrone en utilisant AJAX, ce qui permet de télécharger plusieurs fichiers sans recharger la page.

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!