Drag and Drop dans une boucle

Version imprimable

Bonjour,

j'ai un souci avec mon javascript, je veut afficher des div ou l'on peut glisser/déposer des images c'est div sont en faite des catégorie donc voici la page php qui affiche les div (catégorie) en boucle :

Code:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
 
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8">
 
</head>
 
 
<body>
 
	<?php
        include'bdd.php';
        
        $req = $dbh->query('SELECT * FROM catégorie');
        
        while($result = $req->fetch()){
                
        $categorie = $result['titre'];
        $photo = $result['photo'];
        $chemin = "categorie/$categorie/$photo";
        
        echo "<div class='container'>
        
    <div class='contr'>
        <cite>Glissez – déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers – taille maximale par fichier 256 kb)</cite>
    </div>
    
    <div class='upload_form_cont'>
        <div class='dropArea' id='dropArea' style='background-image: url($chemin); background-size: cover;'>Zone de drop</div>
        
        <div class='info'>
            <div>Fichiers restants : <span id='count'>0</span></div>
            <input id='url' type='hidden' value='./upload.php'/>
            <input id='categorie' type='hidden' value='$categorie'/>
        </div>
            
            <h2>Résultat :</h2>
            
            <div id='result'></div>
            
            <canvas width='500' height='20'></canvas>
        </div>
    </div>
</div>";
                
        }
                
        ?>
 
 
 
 
<script src="animmsg.js"></script>
 
 
 
</body>
 
 
</html>

et voici la page javascript qui traite :

Code:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// variables
var dropArea = document.getElementById('dropArea');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var count = document.getElementById('count');
var destinationUrl = document.getElementById('url');
var categorie = encodeURIComponent(document.getElementById("categorie").value);
var result = document.getElementById('result');
var list = [];
var totalSize = 0;
var totalProgress = 0;
 
 
var divs = document.getElementsByClassName('container'), i;
 
for (i = 0; i < divs.length; ++i) {
 
// initialisation
(function(){
 
    // gestionnaires
    function initHandlers() {
        dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListener('dragover', handleDragOver, false);
    }
 
    // affichage de la progression
    function drawProgress(progress) {
        context.clearRect(0, 0, canvas.width, canvas.height); // effacer le canvas
 
        context.beginPath();
        context.strokeStyle = '#4B9500';
        context.fillStyle = '#4B9500';
        context.fillRect(0, 0, progress * 500, 20);
        context.closePath();
 
        // affichage de la progression (mode texte)
        context.font = '16px Verdana';
        context.fillStyle = '#000';
        context.fillText('Progression : ' + Math.floor(progress*100) + ' %', 50, 15);
    }
 
    // survol lors du déplacement
    function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
 
        dropArea.className = 'hover';
    }
 
    // glisser déposer
    function handleDrop(event) {
        event.stopPropagation();
        event.preventDefault();
 
        processFiles(event.dataTransfer.files);
    }
 
    // traitement du lot de fichiers
    function processFiles(filelist) {
        if (!filelist || !filelist.length || list.length) return;
 
        totalSize = 0;
        totalProgress = 0;
        result.textContent = '';
 
        for (var i = 0; i < filelist.length && i < 5; i++) {
            list.push(filelist[i]);
            totalSize += filelist[i].size;
        }
        uploadNext();
    }
 
    // à la fin, traiter le fichier suivant
    function handleComplete(size) {
        totalProgress += size;
        drawProgress(totalProgress / totalSize);
        uploadNext();
    }
 
    // mise à jour de la progression
    function handleProgress(event) {
        var progress = totalProgress + event.loaded;
        drawProgress(progress / totalSize);
    }
 
    // transfert du fichier image
    function uploadFile(file, status) {
 
        // création de l'objet XMLHttpRequest
        var xhr = new XMLHttpRequest();
        xhr.open('POST', destinationUrl.value);
        xhr.onload = function() {
            result.innerHTML += this.responseText;
            handleComplete(file.size);
        };
        xhr.onerror = function() {
            result.textContent = this.responseText;
            handleComplete(file.size);
        };
        xhr.upload.onprogress = function(event) {
            handleProgress(event);
        }
        xhr.upload.onloadstart = function(event) {
        }
 
        // création de l'objet FormData
        var formData = new FormData();
        formData.append('myfile', file);
        formData.append('categorie', categorie);
 
        xhr.send(formData);
 
    }
 
 
    // transfert du fichier suivant
    function uploadNext() {
        if (list.length) {
            count.textContent = list.length - 1;
            dropArea.className = 'uploading';
 
            var nextFile = list.shift();
            if (nextFile.size >= 262144) { // 256 kb
                result.innerHTML += '<div class="f">Fichier trop gros (dépassement de la taille maximale)</div>';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {
            dropArea.className = '';
        }
    }
 
    initHandlers();
})();
 
}

tout marche parfaitement sur la première div et je sais que un id doit être unique dans la page c'est pourquoi j'ai mit :

Code:

1
2
3
var divs = document.getElementsByClassName('container'), i;
 
for (i = 0; i < divs.length; ++i) {

je pensais que le traitement recommencerais a chaque fois qu'il rencontre la classe container mais apparemment sa ne marche pas

CDT

10/07/2017, 17h24
sekaijin
le Drag et Drop sont des événements produit par l'utilisateur il ne peuvent pas être dans une boucle.

ce qui est dans la boucle c'est le code HTML source produit par le PHP côté serveur alors que le D&D sont des objet crée par le navigateur dans la mémoire du navigateur accessible via javascript.

Alors avant de poser une question sur javascript il serait bon de se relire et de suivre les préconisations du forum
à savoir
NE PAS POSTER DE PHP ASP JSP ... mais le HTML que produit le serveur.

Si pour la miliardième fois cela avait été fait (il suffit de faire afficher la source dans le navigateur)
Une simple lecture t'aurais montré que ton code HTML est foireux il n'est pas conforme.
Tu peux donc tenter de mettre tout le javascript que tu veux tu travaille sur un code faux. le navigateur va l'interprété de son mieux mais JAMAIS il de produire un DOM qui corresponds à 100% à ton HTML

et javascript ne travaille pas sur ton code HTML il travail sur le DOM que le navigateur à Produit.

si on résume tu as un PHP qui produit un text HTML foireux
le navigateur interprète ce HTML pour en faire un DOM
Ce DOM ne peux pas être conforme à ton HTML (foireux) et il encore plus loin du PHP que tu as posté.

Le javascript tente d'agir sur un DOM que tu imagine avoir crée et ne trouve pas ses petits.

Pour la milliardième fois les règles du forum sont là pour vous aider. suivez-les et ça ira beaucoup mieux.

Je n'ai pas lu la totale car dès le premier coup d'oeil est est évident que le code php n'est pas bon pour produire un HTML conforme.
une petite lecture de https://www.w3schools.com/tags/att_global_id.asp nous dit que id DOIT être UNIQUE
une lecture du code
Code:

1 2 while($result = $req->fetch()){ echo "....<div class='dropArea' id='dropArea'";
Donc si il y a 100 enregistrements 100 dic auront le même id.
il est inutile d'analyser le code plus loin ça suffit à tout planter.

A+JYT
11/07/2017, 11h28
vinil

Bonjour,

effectivement j'avais bien remarquer que cela ne marchait pas et qu'il enregistrait plusieurs fois la même image mais c’était pour donner un exemple, comment je suis censé afficher mon code HTML alors ?? j'ai bien spécifier pourtant "je sais que un id doit être unique dans la page" même si j’enlève l'ID pour mettre une class sa ne change pas
11/07/2017, 11h37
sekaijin

il faut mettre un id unique

:salut:

Il y a une foule d'ID dupliqué et l'organisation de votre code est bizarre.

On peut travailler en utilisant des classes, exemple :

Code:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }           
                
                /* CSS du test */
                
                
                /* Fin CSS du test */
 
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        
      // code du test
                        
                        const
                                containers = document.querySelectorAll( ".container");
                         
                        for ( const [ i, container ] of Array.from( containers ).entries() ) {
                                const
                                        dropAera = container.querySelector( ".dropAera" ),
                                        canvas = container.querySelector( "canvas" ),
                                        count = container.querySelector( "count" ),
                                        destinationUrl = container.querySelector( ".url" ),
                                        categorie = encodeURIComponent( container.querySelector( ".categorie" ).value ),
                                        result = container.querySelector( ".result" ),
                                        ctx = canvas.getContext( "2d" );
                                        
                                // début debug
                                
                                console.log( i );
                                result.textContent = i;
                                
                                switch( i ){
                                        case 0 :
                                                ctx.fillStyle = "green";
                                                ctx.fillRect( 10, 10, 100, 100 );
                                                break;
                                        case 1 :
                                                ctx.fillStyle = "red";
                                                ctx.fillRect( 10, 10, 100, 100 );
                                                break;
                                        case 2 :
                                                ctx.fillStyle = "yellow";
                                                ctx.fillRect( 10, 10, 100, 100 );
                                                break;
                                        default :
                                                ctx.fillStyle = "grey";
                                                ctx.fillRect( 10, 10, 100, 100 );
                                }
                                
                                // fin debug
                        }
                        
                        // fin code du test
    }, false );
  </script>
</head>
<body>
 
	<div class='container'>
			<div class='contr'>
					<cite>Glissez ? déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers ? taille maximale par fichier 256 kb)</cite>
			</div>
			<div class='upload_form_cont'>
					<div class='dropArea'>Zone de drop</div>
					<div class='info'>
							<div>Fichiers restants : <span class="count">0</span></div>
							<input class="url" type='hidden' value='./upload.php'/>
							<input class="categorie" type='hidden' value=''/>
					</div>
						<h2>Résultat :</h2>
						<div class="result"></div>
						<canvas width='500' height='20'></canvas>
					</div>
			</div>
	</div>	
	<div class='container'>
			<div class='contr'>
					<cite>Glissez ? déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers ? taille maximale par fichier 256 kb)</cite>
			</div>
			<div class='upload_form_cont'>
					<div class='dropArea'>Zone de drop</div>
					<div class='info'>
							<div>Fichiers restants : <span class="count">0</span></div>
							<input class="url" type='hidden' value='./upload.php'/>
							<input class="categorie" type='hidden' value=''/>
					</div>
						<h2>Résultat :</h2>
						<div class="result"></div>
						<canvas width='500' height='20'></canvas>
					</div>
			</div>
	</div>	
	<div class='container'>
			<div class='contr'>
					<cite>Glissez ? déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers ? taille maximale par fichier 256 kb)</cite>
			</div>
			<div class='upload_form_cont'>
					<div class='dropArea'>Zone de drop</div>
					<div class='info'>
							<div>Fichiers restants : <span class="count">0</span></div>
							<input class="url" type='hidden' value='./upload.php'/>
							<input class="categorie" type='hidden' value=''/>
					</div>
						<h2>Résultat :</h2>
						<div class="result"></div>
						<canvas width='500' height='20'></canvas>
					</div>
			</div>
	</div>	
 
</body>
</html>

11/07/2017, 14h50
vinil
Au-tant pour moi j'ai réussi maintenant j'ai un problème similaire lors du traitement, comment transmettre la catégorie donc le :

Code:

<input name='categorie' type='hidden' value='$categorie'/>

sélectionner car je récupère un tableau mais comment savoir celui qui a été sélectionner ?

Code:

var categorie = encodeURIComponent(document.getElementsByName("categorie").value);

doit-je faire une boucle comme ceci :
Code:

1 2 3 for(i=0; i < categorie.length; i++){ categorie = categorie[i]; }
?
13/07/2017, 11h22
vinil

si quelqu'un a une solution car je suis toujours bloquer, comment savoir sur quelle div nous avons déposer la photo ?