Actualiser une balise canvas

Bonjour, je suis en train de faire un petit drag and drop mais j'ai un petit problème. J'arrive maintenant à afficher la photo mais je ne sais pas comment récupérer le nom du fichier.

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
 
(function(s){
 
   $.fn.dropfile = function(oo){
 
      this.each(function(){
         $('<span>').addClass('message').append('D&eacute;poser l\'image ici !').appendTo(this);
         $('<span>').addClass('progress').appendTo(this);
         $(this).bind({
            dragenter : function(e){
               e.preventDefault();
               console.log('dragenter');
            },
            dragover : function(e){
               e.preventDefault();
               $(this).addClass('hover');
               console.log('dragover');
            },
            dragleave : function(e){
               e.preventDefault();
               $(this).removeClass('hover');
               console.log('dragleave');
            }
         });
 
         this.addEventListener('drop', function(e){
               e.preventDefault();
               var files = e.dataTransfer.files;
               var id = e.target.parentElement.parentElement.id;
               upload(files,id,$(this),0);
         }, 'false');
 
   });
 
   function upload(files,id,area,index){
      var file = files[index];
      var xhr = new XMLHttpRequest();
      var progress = area.find('.progress');
      xhr.addEventListener('load',function(e){
         area.removeClass('hover');
         progress.css({width:242}).html('Image chargé');
 
         a = id.split('_');
         var a = document.getElementById('canvas_' + a[1]);
         var ctx_a = a.getContext("2d");
         var image_a = new Image(); 
         image_a.src = 'tempo/'+ id +'/IMG_0232.JPG';
         image_a.onload = function() {ctx_a.drawImage(this,0,0,242,182);};
 
      },false);
      xhr.upload.addEventListener('progress',function(e){
         if(e.lengthComputable){
            var perc = (Math.round(e.loaded/e.total) * 100)+ '%';
            progress.css({width:perc}).html(perc);
         }},false);
         xhr.open('post', 'upload.php', true);
         xhr.setRequestHeader('content-type', 'multipart/form-data');
         xhr.setRequestHeader('x-file-type', file.type);
         xhr.setRequestHeader('x-file-size', file.size);
         xhr.setRequestHeader('x-file-name', file.name);
         xhr.setRequestHeader('photo', id);
         xhr.send(file);
      }
 
   }
 
})(jQuery);

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
 
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="drag_drop.css" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
   jQuery(function(s){s('.dropfile').dropfile();});
</script>
</head>
<body>
 
<div id="photo_1">
   <div class="dropfile"></div>
   <canvas id="canvas_1" width="242" height="182"></canvas>
   <div id="remarque">
      <select name="remarque">
         <option value="r_11">Remarque 11</option>
         <option value="r_20">Remarque 20</option>
         <option value="r_34">Remarque 34</option>
      </select>
   </div>
</div>
 
<div id="photo_2">
   <div class="dropfile"></div>
   <canvas id="canvas_2" width="242" height="182"></canvas>
   <div id="remarque">
      <select name="remarque">
         <option value="r_11">Remarque 11</option>
         <option value="r_20">Remarque 20</option>
         <option value="r_34">Remarque 34</option>
      </select>
   </div>
</div>
 
<script type="text/javascript" src="dropfile.js"></script>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
$headers = apache_request_headers();
$source = file_get_contents('php://input');
 
$dossier = $headers['photo'];
 
file_put_contents("tempo/$dossier/".$headers['x-file-name'],$source);
 
$dossier_tempo = array_diff(scandir("tempo/$dossier"), array('..', '.'));
 
print_r($dossier_tempo);
 
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
 
.dropfile {border: 1px solid #000; width: 242px; height: 30px; margin-bottom: 1px;}
.message {text-align: center; display: block; font-size: 14px; vertical-align: middel; line-height: 30px; height: 30px;}
.dropfile.hover {background-color:#D6D7E5;}
 
canvas {border: 1px solid #000; width: 242px; height: 182px;}
 
#remarque {width: 242px; height: 30px;}
#remarque select {width: 100%;}
 
.progress {width: 0; height: 30px; background-color: #42A539; position: relative; display: block; top: -30px; text-align: center; vertical-align: middle; line-height: 30px;}