Donc je vais essayé d'être assez claire , j'ai voulu crée un album photo sans base de donné pour le moment ( Une chose après l'autre
) voila donc j'ai un problème avec le Drag & Drop 
donc dans mon formulaire basique j'avais un script php qui redimensionner mes images et effectuer des vérifications et s'occuper de la taille on va dire c'est un peu le noyau de mon album :
(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;
}
}
?>
et quand donc je Drag une image bien j'aimerai qu'elle soit soumise au script au dessus mais vu qu'il y a du js je suis un peu perdu ... je vous met les fichiers du Drag :
(Post_file.php)
<?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);
}
?>[javascript]
$(function(){
var dropbox = $('#dropbox'),
message = $('.message', dropbox);
dropbox.filedrop({
// The name of the $_FILES entry:
paramname:'pic',
maxfiles: 5,
maxfilesize: 100,
url: 'post_file.php',
uploadFinished:function(i,file,response){
$.data(file).addClass('done');
// response is the JSON object that post_file.php returns
},
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!');
// Returning false will cause the
// file to be rejected
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 = 215;
image.height = 112;
reader.onload = function(e){
// e.target.result holds the DataURL which
// can be used as a source of the image:
image.attr('src',e.target.result);
};
// Reading the file as a DataURL. When finished,
// this will trigger the onload function above:
reader.readAsDataURL(file);
message.hide();
preview.appendTo(dropbox);
// Associating a preview container
// with the file, using jQuery's $.data():
$.data(file,preview);
}
function showMessage(msg){
message.html(msg);
}
});[/javascript]
(jquery.filedrop.js)
[javascript]
(function($){
jQuery.event.props.push("dataTransfer");
var opts = {},
default_opts = {
url: '',
refresh: 1000,
paramname: 'userfile',
maxfiles: 25,
maxfilesize: 1, // MBs
data: {},
drop: empty,
dragEnter: empty,
dragOver: empty,
dragLeave: empty,
docEnter: empty,
docOver: empty,
docLeave: empty,
beforeEach: empty,
afterAll: empty,
rename: empty,
error: function(err, file, i){alert(err);},
uploadStarted: empty,
uploadFinished: empty,
progressUpdated: empty,
speedUpdated: empty
},
errors = ["BrowserNotSupported", "TooManyFiles", "FileTooLarge"],
doc_leave_timer,
stop_loop = false,
files_count = 0,
files;
$.fn.filedrop = function(options) {
opts = $.extend( {}, default_opts, options );
this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
$(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
};
function drop(e) {
opts.drop(e);
files = e.dataTransfer.files;
if (files === null || files === undefined) {
opts.error(errors[0]);
return false;
}
files_count = files.length;
upload();
e.preventDefault();
return false;
}
function getBuilder(filename, filedata, boundary) {
var dashdash = '--',
crlf = '\r\n',
builder = '';
$.each(opts.data, function(i, val) {
if (typeof val === 'function') val = val();
builder += dashdash;
builder += boundary;
builder += crlf;
builder += 'Content-Disposition: form-data; name="'+i+'"';
builder += crlf;
builder += crlf;
builder += val;
builder += crlf;
});
builder += dashdash;
builder += boundary;
builder += crlf;
builder += 'Content-Disposition: form-data; name="'+opts.paramname+'"';
builder += '; filename="' + filename + '"';
builder += crlf;
builder += 'Content-Type: application/octet-stream';
builder += crlf;
builder += crlf;
builder += filedata;
builder += crlf;
builder += dashdash;
builder += boundary;
builder += dashdash;
builder += crlf;
return builder;
}
function progress(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
if (this.currentProgress != percentage) {
this.currentProgress = percentage;
opts.progressUpdated(this.index, this.file, this.currentProgress);
var elapsed = new Date().getTime();
var diffTime = elapsed - this.currentStart;
if (diffTime >= opts.refresh) {
var diffData = e.loaded - this.startData;
var speed = diffData / diffTime; // KB per second
opts.speedUpdated(this.index, this.file, speed);
this.startData = e.loaded;
this.currentStart = elapsed;
}
}
}
}
function upload() {
stop_loop = false;
if (!files) {
opts.error(errors[0]);
return false;
}
var filesDone = 0,
filesRejected = 0;
if (files_count > opts.maxfiles) {
opts.error(errors[1]);
return false;
}
for (var i=0; i<files_count; i++) {
if (stop_loop) return false;
try {
if (beforeEach(files) != false) {
if (i === files_count) return;
var reader = new FileReader(),
max_file_size = 1048576 * opts.maxfilesize;
reader.index = i;
if (files.size > max_file_size) {
opts.error(errors[2], files, i);
filesRejected++;
continue;
}
reader.onloadend = send;
reader.readAsBinaryString(files);
} else {
filesRejected++;
}
} catch(err) {
opts.error(errors[0]);
return false;
}
}
function send(e) {
// Sometimes the index is not attached to the
// event object. Find it by size. Hack for sure.
if (e.target.index == undefined) {
e.target.index = getIndexBySize(e.total);
}
var xhr = new XMLHttpRequest(),
upload = xhr.upload,
file = files[e.target.index],
index = e.target.index,
start_time = new Date().getTime(),
boundary = '------multipartformboundary' + (new Date).getTime(),
builder;
newName = rename(file.name);
if (typeof newName === "string") {
builder = getBuilder(newName, e.target.result, boundary);
} else {
builder = getBuilder(file.name, e.target.result, boundary);
}
upload.index = index;
upload.file = file;
upload.downloadStartTime = start_time;
upload.currentStart = start_time;
upload.currentProgress = 0;
upload.startData = 0;
upload.addEventListener("progress", progress, false);
xhr.open("POST", opts.url, true);
xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='
+ boundary);
xhr.sendAsBinary(builder);
opts.uploadStarted(index, file, files_count);
xhr.onload = function() {
if (xhr.responseText) {
var now = new Date().getTime(),
timeDiff = now - start_time,
result = opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff);
filesDone++;
if (filesDone == files_count - filesRejected) {
afterAll();
}
if (result === false) stop_loop = true;
}
};
}
}
function getIndexBySize(size) {
for (var i=0; i < files_count; i++) {
if (files.size == size) {
return i;
}
}
return undefined;
}
function rename(name) {
return opts.rename(name);
}
function beforeEach(file) {
return opts.beforeEach(file);
}
function afterAll() {
return opts.afterAll();
}
function dragEnter(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.dragEnter(e);
}
function dragOver(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.docOver(e);
opts.dragOver(e);
}
function dragLeave(e) {
clearTimeout(doc_leave_timer);
opts.dragLeave(e);
e.stopPropagation();
}
function docDrop(e) {
e.preventDefault();
opts.docLeave(e);
return false;
}
function docEnter(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.docEnter(e);
return false;
}
function docOver(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.docOver(e);
return false;
}
function docLeave(e) {
doc_leave_timer = setTimeout(function(){
opts.docLeave(e);
}, 200);
}
function empty(){}
try {
if (XMLHttpRequest.prototype.sendAsBinary) return;
XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
function byteValue(x) {
return x.charCodeAt(0) & 0xff;
}
var ords = Array.prototype.map.call(datastr, byteValue);
var ui8a = new Uint8Array(ords);
this.send(ui8a.buffer);
}
} catch(e) {}
})(jQuery);[/javascript]
je vous met la page ou on upload les images :
(Admin galerie.php)
<?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>
voila voila j'espere être comprehensible et j'espere pouvoir trouver ma réponse ici merci d'avance =D>
