Téléchargement de fichiers Ajax avec PHP et jQuery

Vous recherchez un téléchargement de fichier en utilisant Ajax en PHP? Le téléchargement d’un fichier via Ajax est une tendance de nos jours. Il ajoute une meilleure expérience utilisateur sur un site Web. Dans cet article, je vous montre comment télécharger des fichiers via Ajax avec PHP et jQuery.

Le téléchargement de fichiers/d’images est une tâche régulière pour les développeurs. Il existe plusieurs cas où vous devez créer une fonctionnalité de téléchargement de fichiers. Certains des exemples courants sont le téléchargement de photos de profil, d’images de curseur, de témoignages, de portfolios, de carrousels, etc.

Pourquoi avoir besoin de File Upload en utilisant Ajax ?

La principale raison pour laquelle vous effectuez un téléchargement de fichier via Ajax est que vous ne souhaitez pas actualiser une page après le téléchargement de fichier. Et c’est évident. Il ne sert à rien de charger une page entière si ce n’est pas nécessaire. Si vous chargez une page après le téléchargement du fichier, vous ajoutez une charge supplémentaire sur un serveur.

Le téléchargement de fichiers à l’aide d’Ajax réduit la charge inutile sur un serveur et offre une meilleure expérience utilisateur sur le site Web.

Alors sans plus tarder commençons par le code.

Téléchargement de fichiers en utilisant Ajax avec PHP et jQuery

Commençons par créer un formulaire qui a une entrée de fichier et le bouton d’envoi. Ajoutez le code HTML ci-dessous dans votre fichier, par exemple index.php.

<form>
    <p><input type="file" name="file" class="file" required></p>
    <input type="submit" name="submit" class="submit" value="Submit">
</form>

Comme je vais écrire un peu de code JavaScript, j’ai respectivement ajouté les classes ‘file’ et ‘submit’ aux boutons d’entrée et de soumission du fichier. Ces classes servent d’identifiant pour les éléments de formulaire.

Code JavaScript

Ensuite, écrivez du code JavaScript qui donnera un appel Ajax à un côté serveur et gérera la réponse.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
    $(function() {
        $('.submit').on('click', function() {
            var file_data = $('.file').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
  
                        $('.file').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

Dans le code JavaScript ci-dessus, j’envoie le contenu du ajax.phpfichier au fichier et gère également la réponse.

Code PHP

À ce stade, nous avons terminé d’envoyer le contenu du fichier côté serveur. Créez maintenant un fichier ajax.phpoù nous devons écrire le code PHP qui télécharge les fichiers sur un serveur.

ajax.php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
  
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
  
echo "success";
die();

Le code PHP ci-dessus vérifie d’abord le répertoire ‘uploads’. Si ce répertoire n’existe pas, il le crée et télécharge le fichier dans ce dossier.

J’espère que vous pouvez maintenant facilement mettre en œuvre le téléchargement de fichiers à l’aide d’Ajax sur votre site Web. J’aimerais entendre vos pensées dans la section des commentaires ci-dessous.

Articles Liés

• Comment charger un article WordPress avec AJAX
• Comment utiliser la saisie semi-automatique jQuery avec Ajax
• Glisser-déposer le téléchargement de fichiers à l’aide de JavaScript et PHP