actualiser une balise canvas

stephcache
Javascript

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

[code]
(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]

[code]
<!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]

[code]
<?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]

[code]
.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;}
[/code]

Aucune réponse