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 html : 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
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 : 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
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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