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 : 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 (function(s){ $.fn.dropfile = function(oo){ this.each(function(){ $('<span>').addClass('message').append('Dé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 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 <!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 php : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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;}
Partager