Page 1 sur 1

Php; Image upload Propriété

Posté : 20 nov. 2013, 15:29
par Carpediem94
Bonjour bonjour,

j'ai fais un système d'upload pour crée un album photo ,

donc le premier coup j'ai crée un formulaire rien de plus basique : Parcourir envoyer :
<form method="post" action ="Admin_galerie.php" enctype="multipart/form-data">
	<input type="file" name="img"/>
	<input type="submit" name="Envoyer" />
</from>
:mrgreen:

enfin bref j'ai décidé de rajouter le Drag & Drop le probleme que j'ai c'est que je sais pas comment faire pour que les propriétés ( redimensionné l'image, convertir en jpg etc..) que j'ai indiqué au premier formulaire soit valable pour le Drag & Drop

je vous poste donc les fichiers :
<?php
if(!empty($_FILES)) {
	require("imgClass.php");
	$img = $_FILES['img'];
	$ext = strtolower (substr($img['name'],-3));
	$allow_ext = array ("jpg",'png','gif');
	if(in_array($ext,$allow_ext)){
		move_uploaded_file($img['tmp_name'],"images/".$img['name']);
	Img::creerMin("images/".$img['name'],"images/min",$img['name'],215,112);
	Img::convertirJPG("images/".$img['name']);

}
else{
	$erreur = "Votre fichier n'est pas une image, si c'est une image contacter le créateur du site";

}




}

?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	



<title>test</title>

     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/zoombox/zoombox.js"></script>
     <link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
     <link href="css.css" rel="stylesheet" type="text/css" media="screen" />

<!-- Drag & Drop -->
        <link rel="stylesheet" href="assets/css/styles.css" />
             <!-- Including The jQuery Library -->
        <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
        
        <!-- Including the HTML5 Uploader plugin -->
        <script src="assets/js/jquery.filedrop.js"></script>
        
        <!-- The main script file -->
        <script src="assets/js/script.js"></script>
    

     <script type="text/javascript">
        jQuery(function($){





            $('a.zoombox').zoombox();


        });
        </script>

</head>
  
<body>

      



<?php
if(isset($erreur)){
	echo $erreur;
}
?>
<form method="post" action ="Admin_galerie.php" enctype="multipart/form-data">
	<input type="file" name="img"/>
	<input type="submit" name="Envoyer" />
</from>

<br><br><br> Nouveauté ! le Drag & Drops est disponible !  <br>

<!--  Drag & Drop -->


        <header>
            <h1>Nouveauté ! le Drag & Drops est disponible !</h1>
        </header>
        
        <div id="dropbox">
            <span class="message">Fait glisser ton images ici <br /><i>(en version bêta)</i></span>
        </div>
        
      




<!-- fin drag & Drop -->

<br><br><br><br>  
  <br><br><br><br>  
  

<!-- essayer de changer de page  -->
<div id="galerie">
<?php
$dos = "images/min";
$dir = opendir($dos);
while($file = readdir($dir)) {
        $allow_ext = array ("jpg", 'png', 'gif');
        $ext = strtolower(substr($file,-3));
      
    if(in_array($ext,$allow_ext)){
  
  
?>
  

 
    <div class="photo">
<!-- ici on met le Css : <div class="min"> -->
<!-- Affiche l'image !-->
 <a class="zoombox zgallery1" href="images/<?php echo $file; ?>" rel="zoombox[galerie]"/>
    <img src="images/min/<?php echo $file; ?>" />
     
  
  
<!-- <H3> <?php #echo $file; ?> non du fichier </h3>   -->
  </a>
</div>
 
<!-- fin du css</div> -->
<?php
    }
}
?>
</div>
<br><br><br><br><br><br><br><br><br><br>

  <footer>
            <h2>bêta</h2>
          
        </footer>
        
   

</body>
</html>


donc ceci est la page d'envoi

cette page est la page ou je décide des tailles , et de les convertir en jpg :
<?php

class Img{

	static function creerMin($img,$chemin,$nom,$mlargeur=100,$mhauteur=100){
		// On supprime l'extension du nom
		$nom = substr($nom,0,-4);
		// On récupère les dimensions de l'image
		$dimension=getimagesize($img);
		// On cré une image à partir du fichier récup
		if(substr(strtolower($img),-4)==".jpg"){$image = imagecreatefromjpeg($img); }
		else if(substr(strtolower($img),-4)==".png"){$image = imagecreatefrompng($img); }
		else if(substr(strtolower($img),-4)==".gif"){$image = imagecreatefromgif($img); }
		// L'image ne peut etre redimensionne
		else{return false; }
		
		// Création des miniatures
		// On cré une image vide de la largeur et hauteur voulue
		$miniature =imagecreatetruecolor ($mlargeur,$mhauteur); 
		// On va gérer la position et le redimensionnement de la grande image
		if($dimension[0]>($mlargeur/$mhauteur)*$dimension[1] ){ $dimY=$mhauteur; $dimX=$mhauteur*$dimension[0]/$dimension[1]; $decalX=-($dimX-$mlargeur)/2; $decalY=0;}
		if($dimension[0]<($mlargeur/$mhauteur)*$dimension[1]){ $dimX=$mlargeur; $dimY=$mlargeur*$dimension[1]/$dimension[0]; $decalY=-($dimY-$mhauteur)/2; $decalX=0;}
		if($dimension[0]==($mlargeur/$mhauteur)*$dimension[1]){ $dimX=$mlargeur; $dimY=$mhauteur; $decalX=0; $decalY=0;}
		// on modifie l'image crée en y plaçant la grande image redimensionné et décalée
		imagecopyresampled($miniature,$image,$decalX,$decalY,0,0,$dimX,$dimY,$dimension[0],$dimension[1]);
		// On sauvegarde le tout
		imagejpeg($miniature,$chemin."/".$nom.".jpg",90);
		return true;
	}

	static function convertirJPG($img){
// On cré une image à partir du fichier récup
		if(substr(strtolower($img),-4)==".jpg"){$image = imagecreatefromjpeg($img); }
		else if(substr(strtolower($img),-4)==".png"){$image = imagecreatefrompng($img); }
		else if(substr(strtolower($img),-4)==".gif"){$image = imagecreatefromgif($img); }
		// L'image ne peut etre redimensionne
		else{return false; }
		unlink($img);
		imagejpeg($image,substr($img,0,-3)."jpg",90);
		return true;

	}
}

?>
voila donc la rien de Drag & Drop ca j'ai juste les propriété que j'aimerai le Drag s'associe
maintenant les fichier du Drag :

donc le post_file :
<?php
// If you want to ignore the uploaded files, 
// set $demo_mode to true;

$demo_mode = false;
$upload_dir = 'images/min/';
$allowed_ext = array('jpg','jpeg','png','gif');


if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Error! Wrong HTTP method!');
}


if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){
	
	$pic = $_FILES['pic'];

	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
	}	

	if($demo_mode){
		
		// File uploads are ignored. We only log them.
		
		$line = implode('		', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));
		file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);
		
		exit_status('Uploads are ignored in demo mode.');
	}
	
	
	// Move the uploaded file from the temporary 
	// directory to the uploads folder:
	
	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('File was uploaded successfuly!');
	}
	
}

exit_status('Something went wrong with your upload!');


// Helper functions

function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}
?>
et le js :

[javascript]$(function(){

var dropbox = $('#dropbox'),
message = $('.message', dropbox);

dropbox.filedrop({

paramname:'pic',

maxfiles: 5,
maxfilesize: 100,
url: 'post_file.php',

uploadFinished:function(i,file,response){
$.data(file).addClass('done');

},

error: function(err, file) {
switch(err) {
case 'BrowserNotSupported':
showMessage('Votre navigateur ne supporte pas le HTML5');
break;
case 'TooManyFiles':
alert('Trop de fichier 5 au maximum durant les tests (configurable)');
break;
case 'FileTooLarge':
alert(file.name+' Trop lourd durant le temps de configuration , merci de prevenir le webmaster ! (configurable).');
break;
default:
break;
}
},

// Called before each upload is started
beforeEach: function(file){
if(!file.type.match(/^image\//)){
alert('Only images are allowed!');


return false;
}
},

uploadStarted:function(i, file, len){
createImage(file);
},

progressUpdated: function(i, file, progress) {
$.data(file).find('.progress').width(progress);
}

});

var template = '<div class="preview">'+
'<span class="imageHolder">'+
'<img />'+
'<span class="uploaded"></span>'+
'</span>'+
'<div class="progressHolder">'+
'<div class="progress"></div>'+
'</div>'+
'</div>';


function createImage(file){

var preview = $(template),
image = $('img', preview);

var reader = new FileReader();

image.width = 112;
image.height = 215;

reader.onload = function(e){



image.attr('src',e.target.result);
};


reader.readAsDataURL(file);

message.hide();
preview.appendTo(dropbox);



$.data(file,preview);
}

function showMessage(msg){
message.html(msg);
}

});[/javascript]

merci d'avance ! :priere:

Re: Php; Image upload Propriété

Posté : 04 déc. 2013, 00:06
par moogli
salut,


si personne ne t'as répondus c'est surement que ton problème est trop large.

tu n'indique pas quel est le problème exact.

tu fournis beaucoup de ligne de code, il faut que l'on fouille pour trouver un problème ?

le problème peux se situer coté front (html / js) et / ou php il faut donc que commence par savoir le coté qui ne va pas pour séparer correctement la chose.

Merci de ne pas dupliquer le post ;)

@+

Re: Php; Image upload Propriété

Posté : 04 déc. 2013, 14:28
par Carpediem94
euh désolé pour le double poste, je pense être plus claire justement que sur celui la, le problème je ne le trouve pas c'est bien pour ça que je viens sur des forums, je ne dis pas de fouiller mais je met les codes ça peut toujours servir ... :lol:

le problème que j'ai c'est donc comment puis-je intégrer mon script imgClass.php :

(
<?php

class Img{

        static function creerMin($img,$chemin,$nom,$mlargeur=100,$mhauteur=100){
                // On supprime l'extension du nom
                $nom = substr($nom,0,-4);
                // On récupère les dimensions de l'image
                $dimension=getimagesize($img);
                // On cré une image à partir du fichier récup
                if(substr(strtolower($img),-4)==".jpg"){$image = imagecreatefromjpeg($img); }
                else if(substr(strtolower($img),-4)==".png"){$image = imagecreatefrompng($img); }
                else if(substr(strtolower($img),-4)==".gif"){$image = imagecreatefromgif($img); }
                // L'image ne peut etre redimensionne
                else{return false; }
               
                // Création des miniatures
                // On cré une image vide de la largeur et hauteur voulue
                $miniature =imagecreatetruecolor ($mlargeur,$mhauteur);
                // On va gérer la position et le redimensionnement de la grande image
                if($dimension[0]>($mlargeur/$mhauteur)*$dimension[1] ){ $dimY=$mhauteur; $dimX=$mhauteur*$dimension[0]/$dimension[1]; $decalX=-($dimX-$mlargeur)/2; $decalY=0;}
                if($dimension[0]<($mlargeur/$mhauteur)*$dimension[1]){ $dimX=$mlargeur; $dimY=$mlargeur*$dimension[1]/$dimension[0]; $decalY=-($dimY-$mhauteur)/2; $decalX=0;}
                if($dimension[0]==($mlargeur/$mhauteur)*$dimension[1]){ $dimX=$mlargeur; $dimY=$mhauteur; $decalX=0; $decalY=0;}
                // on modifie l'image crée en y plaçant la grande image redimensionné et décalée
                imagecopyresampled($miniature,$image,$decalX,$decalY,0,0,$dimX,$dimY,$dimension[0],$dimension[1]);
                // On sauvegarde le tout
                imagejpeg($miniature,$chemin."/".$nom.".jpg",90);
                return true;
        }

        static function convertirJPG($img){
// On cré une image à partir du fichier récup
                if(substr(strtolower($img),-4)==".jpg"){$image = imagecreatefromjpeg($img); }
                else if(substr(strtolower($img),-4)==".png"){$image = imagecreatefrompng($img); }
                else if(substr(strtolower($img),-4)==".gif"){$image = imagecreatefromgif($img); }
                // L'image ne peut etre redimensionne
                else{return false; }
                unlink($img);
                imagejpeg($image,substr($img,0,-3)."jpg",90);
                return true;

        }
}

?>
)

sur le Drag & Drop afin de pouvoir avoir toute les informations sur un script et non pas sur plusieurs #-o

Re: Php; Image upload Propriété

Posté : 04 déc. 2013, 21:20
par moogli
ce n'est pas possible pour la simple et bonne raison que le drag & drop c'est coté client et que ton script la c'est du php donc coté serveur.

ce qu'il te faut c'est faire causer les deux ensembles et donc via des requetes ajax.

vu que tu parle d'upload, généralement c'est fait dans une frame invisible (le formulaire a pour attribut target une iframe qui a un display non).

après a toi de voir l'organisation de ton code pour réaliser le dialogue entre chacune des actions utilisateur (events js) et des scripts serveur en php.


@+

Re: Php; Image upload Propriété

Posté : 05 déc. 2013, 00:55
par Carpediem94
ok ok , merci de ta reponse, donc en faite le plus simple actuellement pour moi c'est soit de rajouter un script juste pour le drag pour qu'il s'occupe des miniatures, soit faire ca directement dans le js =D>