Page 1 sur 1

Envoie d'image + vérification des images + diaporama direct

Posté : 15 juin 2010, 14:22
par popo79pr
Bonjour,

Pour tout ceux que ça intéresse, je vais ici expliquer comment créer un service où les gens envoie les photos, elles sont vérifiées puis envoyées sur le serveur, et enfin, on les voit directement dans un diaporama

Très efficace pour des photos humours pour un anniversaire, ou pour un espace membre (possibilité de changer le répertoire de destination) :)

Page 1 : celle qui contient le formulaire d'envoie [formulaire.php]
A mettre là où vous voulez voir apparaitre le formulaire (entre les bornes [BODY]) : attention > page en php !
<form action="traitement.php" method="post"
 enctype="multipart/form-data">
  <p>Votre photo (autoris&eacute;es : .jpg, .jpeg, .gif, .png)<br />
  <input name="monfichier" type="file" /><br />
  <input value="Envoyer le fichier" type="submit" /> </p>
</form>
La page "traitement.php" est la page qui traitera les données envoyées pas l'internaute.

______________________________________________________________________________
Page 2 : traitement des données [traitement.php]
Cette page vérifiera les données envoyées et les stockera définitivement (ou non) sur votre serveur. Elle affiche aussi si le fichier a bien été enregistré.
<?php
// Testons si le fichier a bien été envoyé et s'il n'y a pas d'erreur
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
        // Testons si le fichier n'est pas trop gros
        if ($_FILES['monfichier']['size'] <= 1000000)
        {
                // Testons si l'extension est autorisée
                $infosfichier = pathinfo($_FILES['monfichier']['name']);
                $extension_upload = $infosfichier['extension'];
                $extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
                if (in_array($extension_upload, $extensions_autorisees))
                {
                        // On peut valider le fichier et le stocker définitivement
                        move_uploaded_file($_FILES['monfichier']['tmp_name'], 'uploads/' . basename($_FILES['monfichier']['name']));
                        echo "L'envoi a bien été effectué !";
                }
        }
}
?>
Je vais expliquer un peu mon code (malgré qu'il y ai pas mal de commentaires) :
- Avant tout, vérifier qu'un dossier "uploads" est créé dans votre serveur là on se trouve votre page : c'est votre répertoire de destination.

- "monfichier" est le nom donné auparavant à votre formulaire de type file

- "1000000" est la taille du fichier autorisée en ko (à changer selon votre guise)

- Vous pourrez ajouter des extensions, veillez juste à respecter les guillemets ;)

-
echo "L'envoi a bien été effectué !"
peut être remplacer par
echo ""
si vous insérer ce code dans la partie "Head" de votre code html/php (veillez toujours à avoir une extension en .php). Si vous le remplacer, vous pourrez davantage personnaliser la page puisque c'est celle sur laquelle arrive votre internaute une fois le fichier envoyé (pourquoi pas lui proposer un lien retour sur cette page avec un "Votre fichier a bien été envoyé" en plus ^^). Bref, vous me demandrez pour plus d'infos là dessus si besoin.

- Vous pourrez aussi mettre un aperçu ou un récapitulatif à l'internaute sur la page (appel des fonctions "name", vous devez savoir faire, sinon demandez-moi).

______________________________________________________________________________
Page 3 : le diaporama [diaporama.php]
Ici, il va s'agir de faire lire à notre fichier php, notre répertoire "uploads" pour que la simplicité et la rapide soit là et nous éviter d'ajouter sans arrêt les adresses des images (on l'a tous fais en html/javascript ça :D).
<script type="text/javascript">
ejs_photo = new Array;
<?
$a = 0;
$handle = opendir("uploads"); while (($file = readdir())!=false) { clearstatcache(); if($file!=".." && $file!=".") {
echo "ejs_photo[$a] = 'uploads/$file';
";
$a++;
}
}
closedir($handle); ?> function ejs_aff_uploads(num)
{
if(document.getElementById)
{
ejs_fin = "";
if(num!=0)
ejs_fin += "<A HREF=# onClick='ejs_aff_uploads("+(num-1)+");return(false)'>< Précédent</A> ";
if(num!=(ejs_photo.length-1))
ejs_fin += "<A HREF=# onClick='ejs_aff_uploads("+(num+1)+");return(false)'>Suivant ></A>";
document.getElementById("ejs_photo_box").innerHTML = "<CENTER><IMG SRC='"+ejs_photo[num]+"' BORDER=0><BR>"+ejs_fin+"</CENTER>";
}
}
window.onload = new Function("ejs_aff_uploads(0)")
</script>
Heu ... rien à dire là dessus, car il est simple à comprendre :) (enfin je crois)

VOIR UN EXEMPLE SUR MON SITE ==> http://julienmaroggi.fr/surprise/photoseb.php

Bonne chance à vous, en cas de problème ou de questions, n'hésitez pas ;)

Tchouss les amis !