par

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

1 Réponse

+1 validé
par

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é";
?>

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...