Bonjour à tous.
Je ne comprend rien. Depuis quelques mois, je construit petit à petit un petit site.
Il se veux le site représentant le journal d'un jeu.
Donc j'ai mis un système permettant aux admins de posté un journal ( il poste les images et le journal se fait avec un PageFlip ).
L'upload des images se fait en Drag&Drop.
Depuis Janvier, le script est en place, tout fonctionne.
J'ai voulu posté des images cette semaine, et là. PAF.
Sa ne fonctionne plus.
Je n'ai pourtant pas changé les scripts.
Je suis sour Windows 7, sous Chrome.
L'erreur ( dans la console de chrome ) est la suivante :
Les scripts Js sont tous bien appelés :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="./template/javascript/dropfile/dropfile.js"></script>
Dropfile.js :
(function($){
var o = {
message : 'Déposez vos fichiers ici',
script : './template/javascript/dropfile/upload.php',
clone : true,
complete : function(json){
return false;
}
}
$.fn.dropfile = function(oo){
var replace = false;
if(oo) $.extend(o,oo);
this.each(function(){
$('<span>').addClass('instructions').append(o.message).appendTo(this);
$('<span>').addClass('progress').appendTo(this);
$(this).bind({
dragenter : function(e){
e.preventDefault();
},
dragover : function(e){
e.preventDefault();
$(this).addClass('hover');
},
dragleave : function(e){
e.preventDefault();
$(this).removeClass('hover');
}
});
this.addEventListener('drop', function(e){
e.preventDefault();
var files = e.dataTransfer.files;
if($(this).data('value')){
replace = true;
}
upload(files,$(this),0);
}, false);
});
function upload(files,area,index){
var file = files[index];
if(index > 0 && o.clone){
area = area.clone().html('').insertAfter(area).dropfile(o);
area.data('value',null);
}
var xhr = new XMLHttpRequest();
var progress = area.find('.progress');
// Evenements
xhr.addEventListener('load',function(e){
var json = jQuery.parseJSON(e.target.responseText);
area.removeClass('hover');
progress.css({height:0});
if(index < files.length-1){
upload(files,area,index+1);
}
if(json.error){
alert(json.error);
return false;
}
if(o.complete(json)){
return true;
}
if(o.clone && !replace && index == files.length - 1 ){
area.clone().html('').insertAfter(area).dropfile(o);
}
area.data('value',json.name);
area.append(json.content);
},false);
xhr.upload.addEventListener('progress',function(e){
if(e.lengthComputable){
var perc = (Math.round(e.loaded/e.total) * 100)+ '%';
progress.css({height:perc}).html(perc);
}
},false)
xhr.open('post',o.script,true);
xhr.setRequestHeader('content-type', 'multipart/form-data');
xhr.setRequestHeader('x-file-type', file.type);
xhr.setRequestHeader('x-file-size', file.fileSize);
xhr.setRequestHeader('x-file-name', file.fileName);
for(var i in area.data()){
if(typeof area.data(i) !== 'object'){
xhr.setRequestHeader('x-param-'+i, area.data(i));
}
}
xhr.send(file);
}
return this;
}
})(jQuery);
Upload.php :
<?php
header('content-type: application/json');
$h = getallheaders();
$o = new stdClass();
$folder = isset($h'x-param-folder']) ? $h'x-param-folder'].'/' : '../../../contenu/images/journaux/';
$source = file_get_contents('php://input');
$types = Array('image/png');
if(!in_array($h'x-file-type'],$types)){
$o->error = 'Format non supporté';
}else{
if(isset($h'x-param-value'])){
unlink($folder.$h'x-param-value']);
}
imageresize($source,$folder.$h'x-file-name'],true);
imageresize($source,$folder.'min_'.$h'x-file-name'], 80, 200,true);
$o->name = $h'x-file-name'];
$o->content = '<img src="./contenu/images/journaux/min_'.$h'x-file-name'].'"/>';
}
echo json_encode($o);
function imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 90) {
$quality = $quality ? $quality : 90;
$image = imagecreatefromstring($source);
if ($image) {
// Get dimensions
$w = imagesx($image);
$h = imagesy($image);
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w / $h;
if (($ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width / $ratio;
$new_width = $width;
} elseif ($crop && $ratio <= ($width / $height)) {
$new_height = $width / $ratio;
$new_width = $width;
} else {
$new_width = $height * $ratio;
$new_height = $height;
}
} else {
$new_width = $w;
$new_height = $h;
}
$x_mid = $new_width * .5; //horizontal middle
$y_mid = $new_height * .5; //vertical middle
// Resample
error_log('height: '.$new_height.' - width: '.$new_width);
$new = imagecreatetruecolor(round($new_width), round($new_height));
imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// Crop
if ($crop) {
$crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
//($y_mid - ($height * .5))
}
// Output
// Enable interlancing [for progressive JPEG]
imageinterlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.' . $ext;
}
switch ($dext) {
case 'jpeg':
case 'jpg':
imagejpeg($crop ? $crop : $new, $destination, $quality);
break;
case 'png':
$pngQuality = ($quality - 100) / 11.111111;
$pngQuality = round(abs($pngQuality));
imagepng($crop ? $crop : $new, $destination, $pngQuality);
break;
case 'gif':
imagegif($crop ? $crop : $new, $destination);
break;
}
@imagedestroy($image);
@imagedestroy($new);
@imagedestroy($crop);
}
}
?>
Si il vous faut d'autres choses, n'hésitez pas.
J'ai besoin d'aide, je ne comprend pas...
Kr0stAr.
Salut Krostar,
je sais pas si sa peut t'aider mais a partir de la ligne 77 dans le fichier Dropfile.js il faut remplacer par sa :
//avant
xhr.setRequestHeader('content-type', 'multipart/form-data');
xhr.setRequestHeader('x-file-type', file.type);
xhr.setRequestHeader('x-file-size', file.fileSize);
xhr.setRequestHeader('x-file-name', file.fileName);
//après
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);
Tu peut voir dans la console de chrome en faisant un console.log de ton image uploader que sa à changé.
fileSize est devenue size et fileName est devenu name.
j'espère que sa à pu t'aider :)
WebMaster Junior chez 123plantes