Php; Image upload Propriété
Posté : 20 nov. 2013, 15:29
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 :
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 :
cette page est la page ou je décide des tailles , et de les convertir en jpg :
maintenant les fichier du Drag :
donc le post_file :
[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 !
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> 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 !