Comment créer une zone de glisser-déposer multi-fichiers en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-08-21 15:00:14

Question

Bonjour, je cherche à concevoir une zone HTML où un utilisateur pourrait y glisser et déposer des fichiers pour qu'ils soient ensuite envoyés sur le serveur. Auriez-vous un exemple qui saurait gérer l'envoi de multiples fichiers simultanément. Merci

Réponse

Pour créer une zone de glisser-déposer multi-fichiers, vous devez utiliser l’événement ondrop pour déclencher ensuite la fonction JavaScript qui va récupérer les fichiers et les envoyer au serveur via la méthode jQuery Ajax.

La gestion de l'envoi de multiples fichiers s'effectue via une boucle for dans la fonction JavaScript.

Il vous faudra ensuite traiter les fichiers, coté serveur, en PHP.

Voici un exemple pour créer une zone de glisser-déposer multi-fichiers en JavaScript :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment créer une zone de glisser-déposer multi-fichiers en JavaScript ?</title>
<style>
#zone {
background-color: #EEE;
border: #000 4px dashed;
width: 400px;
padding: 8px;
font-size: 18px;
}
#envoi {
width:50%;
margin:0 auto;
}
#envoi p {
text-align: center;
}
#envoi #fichier {
display: none;
}
#nom_fichiers {
font-size: 14px;;
}
</style>
</head>
<body>
<div id="zone" ondrop="glisser_fichier(event)" ondragover="this.style.background = '#CCC';return false" ondragleave="this.style.background = '#EEE'">
    <div id="envoi">
        <p>Glisser les fichiers ici<br>ou<br><input type="button" value="Sélectionner les fichiers" onclick="parcourir_fichier();"></p>
        <input type="file" id="fichier">
<p id="nom_fichiers"></p>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var fichier;

function glisser_fichier(e) 
{
e.preventDefault();
document.getElementById('zone').style.background = "#CCC";
for (i = 0; i < e.dataTransfer.files.length; i++) 
{
fichier = e.dataTransfer.files[i];
document.getElementById('nom_fichiers').innerHTML += "" + fichier.name + "<br>";
envoi_fichier(fichier);
}
}
 
function parcourir_fichier() 
{
    document.getElementById('fichier').click();
    document.getElementById('fichier').onchange = function() 
{
        fichier = document.getElementById('fichier').files[0];
document.getElementById('nom_fichiers').innerHTML += "" + fichier.name + "<br>";
        envoi_fichier(fichier);
    };
}
 
function envoi_fichier(fichier) 
{
    if(fichier != undefined) 
{
        var form_data = new FormData();                  
        form_data.append('file', fichier);
        $.ajax({
            type: 'POST',
            url: 'envoi.php',
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
                alert(response);
                $('#fichier').val('');
            }
        });
    }
}
</script>
</body>
</html>

Voici le code PHP du fichier envoi.php ; dans cet exemple seuls les fichiers au format png, jpg et jpeg sont autorisés.

<?php
$valid_extensions = array('png','jpg','jpeg');
$img = $_FILES['file']['name'];
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
if(in_array($ext, $valid_extensions)) 
{ 
if (!file_exists('fichiers')) 
{
mkdir('fichiers', 0777);
}
move_uploaded_file($_FILES['file']['tmp_name'], 'fichiers/' . $_FILES['file']['name']);
echo "Fichier ". $_FILES['file']['name']." envoyé avec succès";
}
else echo "Fichier non envoyé";
?>