Comment utiliser `.submit()` et `.ajax()` de jQuery pour les téléchargements asynchrones de plusieurs fichiers ?

Soumission de fichiers via AJAX à l'aide de '.submit()' et '.ajax()' de jQuery

Aperçu :

Le téléchargement de plusieurs fichiers sur un serveur est une exigence courante dans le développement Web. Les méthodes « .submit() » et « .ajax() » de jQuery offrent une approche pratique pour soumettre des formulaires et envoyer des données au serveur de manière asynchrone. Cet article explique comment utiliser ces méthodes pour faciliter le téléchargement de plusieurs fichiers.

Formulaire HTML :

Le formulaire HTML doit inclure plusieurs champs de saisie de fichiers, un champ « Ajouter plus "Fichiers" et un bouton Soumettre. Lorsque vous cliquez sur le bouton « Ajouter plus de fichiers », des champs de saisie de fichiers supplémentaires sont ajoutés dynamiquement.

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

JavaScript pour l'ajout dynamique de saisie de fichiers :

Le code JavaScript utilise jQuery pour ajouter des champs de saisie de fichiers 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'>");
    });
});

Télécharger Script :

Le script PHP côté serveur (« upload.php ») gère le processus de téléchargement de fichiers, y compris la validation et l'enregistrement dans le répertoire cible. Il suppose une structure de répertoires hiérarchique pour organiser les fichiers téléchargés.

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 />";
    }
}

jQuery pour la soumission de fichiers AJAX :

Enfin, les '.submit()' et ' Les méthodes .ajax() sont utilisées pour lier un écouteur d'événement au bouton de soumission. Lorsque vous cliquez dessus, une requête AJAX est envoyée au script 'upload.php' et les données du fichier téléchargé sont incluses dans la requête à l'aide d'un objet FormData. La fonction « succès » de jQuery gère la réponse du serveur.

$('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 mettant en œuvre cette approche, vous pouvez télécharger efficacement plusieurs fichiers de manière asynchrone à l'aide de PHP, jQuery et AJAX.

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!