Glisser-déposer le téléchargement de fichiers à l’aide de JavaScript et PHP

Dernière mise à jour Oct 18, 2021

Teneur

Pourquoi avoir besoin de la fonctionnalité de téléchargement de fichiers par glisser-déposer ?

Intégrer le téléchargeur de fichiers par glisser-déposer

Pourquoi avoir besoin de la fonctionnalité de téléchargement de fichiers par glisser-déposer ?

Nous voulons toujours avoir une meilleure expérience utilisateur sur le site Web. Donner la fonction glisser-déposer pour télécharger des fichiers est une option facile à utiliser pour vos utilisateurs. De nombreux sites Web populaires comme Facebook, WordPress utilisent déjà cette fonctionnalité.

Cette fonctionnalité est meilleure que la méthode traditionnelle de téléchargement de fichiers. Cela améliore également l’expérience utilisateur car l’utilisateur fait simplement glisser le fichier et le télécharge sur un serveur.

Dans ce tutoriel, nous allons donner les deux options aux utilisateurs. On peut télécharger le fichier soit par glisser-déposer, soit via l’entrée du fichier.

Je vais utiliser Ajax pour télécharger des fichiers côté serveur. En utilisant Ajax, votre page ne sera pas chargée. Il envoie simplement le fichier au serveur en arrière-plan.

Intégrer le téléchargeur de fichiers par glisser-déposer

Pour commencer, écrivons d’abord le code HTML. Le code HTML suivant aura un conteneur pour le téléchargement de fichiers. Il comprend également un fichier CSS et JS que je vais créer dans les prochaines étapes.

<link rel="stylesheet" href="style.css">
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
    </div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>

Dans le code HTML ci-dessus, j’ai utilisé les 2 événements – ondrop et onclick. Je vais définir leurs méthodes dans le custom.jsfichier. Avant cela, ajoutons le code CSS dans le style.cssfichier.

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:50%;
  margin:0 auto;
}
#drag_upload_file p {
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}

Notre objectif est que lorsqu’un utilisateur supprime ou parcourt un fichier, le fichier doit être téléchargé sur le serveur. Pour cela, vous devez écrire du code JavaScript qui prend un fichier côté client et l’envoie au serveur.

Pour gérer ce flux, ajoutez le code ci-dessous dans le custom.jsfichier.

var fileobj;
function upload_file(e) {
    e.preventDefault();
    fileobj = e.dataTransfer.files[0];
    ajax_file_upload(fileobj);
}
 
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        fileobj = document.getElementById('selectfile').files[0];
        ajax_file_upload(fileobj);
    };
}
 
function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData();                  
        form_data.append('file', file_obj);
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
                alert(response);
                $('#selectfile').val('');
            }
        });
    }
}

Le code JavaScript écrit ci-dessus détecte automatiquement les options choisies par l’utilisateur pour télécharger un fichier. Enfin, la fonction ajax_file_upload()prend l’objet fichier et le transmet au fichier Ajax.

Télécharger le fichier sur le serveur

Dans le fichier Ajax, j’écrirai le code réel qui télécharge le fichier sur le serveur. Créez un fichier appelé ajax.phpet ajoutez-y le code ci-dessous.

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);
 
echo "File uploaded successfully.";

Ce code PHP vérifie d’abord si le dossier appelé ‘uploads’ existe sur un serveur. Sinon, il crée un répertoire ‘uploads’ et déplace le fichier à l’intérieur. Vous pouvez ajuster ce chemin de répertoire selon vos besoins.

J’espère que vous comprenez comment ajouter un téléchargement de fichier par glisser-déposer en utilisant PHP et JavaScript. Faites-moi part de vos réflexions et suggestions dans le commentaire ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net