Discussion :

[danamaro]

Bonjour,
pour mon rattrapage de projet de 1er année je dois faire un drag and drop pour uploader des fichier.
j'y suis presque, mais cela bloque pour l'upload et sa dépasse mes compétences.

le code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
jQuery(document).ready(function(){
 
    $.fn.ZoneDeDrop = function(item) {
 
            $(this).bind({
                // un fichier rentre dans la fenêtre
                dragenter : function(data) {
                    // annuler evenement par defaut
                    data.preventDefault();
                    // console.log('dragenter');
                },
                dragover : function(data) {
                    // annuler evenement par defaut
                    data.preventDefault();
                    $(this).addClass('hover');
                    // console.log('dragover');
                },
                dragleave : function(data) {
                    // annuler evenement par defaut
                    data.preventDefault();
                    $(this).removeClass('hover');
                    // console.log('dragleave');
                }
                ,
                drop : function(data) {
                    // annuler evenement par defaut
                    data.preventDefault();
 
                    var files = data.target.files;
                    if (!files || files.length === 0)
                    files = (data.dataTransfer ? data.dataTransfer.files : data.originalEvent.dataTransfer.files);
 
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST',"../../assets/functions/dragdrop.php",true)
                    // xhr.setRequestHeader('content-type', 'multipart/form-data');
                    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                    xhr.setRequestHeader('x-file-name', files[0].name);
                    xhr.setRequestHeader('x-file-size', files[0].size);
                    xhr.setRequestHeader('x-file-type', files[0].type);
                    xhr.send(files)
 
                }
            });
    }
});

puis la fonction php :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
?php
 
$getHeader = getallheaders();
 
// Ouvre pour lire un contenu existant
$source = file_get_contents('php://input');
 
// Écrit le résultat dans le fichier
file_put_contents('/'.$getHeader['x-file-name'],$source);

je récupère bien toutes les informations, mais rien ne s'upload :


merci d'avance

[Watilin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.send(files[0])

Mais que ferais-tu s’il y avait plusieurs fichiers ? Au minimum, je pense que c’est une bonne idée de faire un retour « seul le fichier [xxx] a été traité » ou quelque chose comme ça.

Sinon, FormData aurait pu t’aider, il gère tout seul les détails fastidieux qui vont avec le type "multipart/form-data".

D’autre part, deux petites remarques :

• il me semble qu’il n’y a pas besoin d’annuler l’évènement dragleave ;
• il faut retirer la classe "hover" également lors de l’évènement drop.