je voudrais savoir comment faire pour afficher une image apres upload sans recharger la page comme cela se fait sur facebook. je ne suis pas fort en JS mais quelqu'un m a dis que ce n'est qu'avec du JS que celà peut se faire alors je viens vous demander de l'aide. merci

Ajax pour être plus précis.

mostuf ok c'est compris ce n est pas java mais ajax. mais comment puis je le faire je demande le script en fait. je ne maitrise pas l ajax et je dois vite finir la plateforme d ici lundi. si possible peux tu me coacher pour ça?

Salut!

As-tu déjà une méthode utilisant PHP qui arrive à stocker une image dans un fichier?

tu veux dire afficher une image dans un fichier?

Tu as déjà un script PHP qui te permet d'uploader une image (en verifiant son extension, sa taille, etc)?

oui oui j'ai déjà ça

<?php
if(isset($_POST['pseudo'])) $pseudo=$_POST['pseudo'];
else $pseudo="img_non_renomée";
$nomOrigine = $_FILES['monfichier']['name'];
$elementsChemin = pathinfo($nomOrigine);
$extensionFichier = $elementsChemin['extension'];
$extensionsAutorisees = array("jpeg", "jpg", "JPEG", "JPG", "GIF", "PNG", "png", "gif");
if (!(in_array($extensionFichier, $extensionsAutorisees))) {
    echo "Vous devez uploader un fichier de type png, gif, jpg, jpeg";
} else {
	// ici se trouve mon dossier de destination de la photo
    $repertoireDestination = dirname(__FILE__)."/Fichiers/Upload/Photo_etudiant/";
    //$nomDestination = "fichier_du_".date("YmdHis").".".$extensionFichier;//ici je mets l'heure la date et la seconde près pour pouvoir différencier les fichiers uploaders. plutard je dois penser à récupérer le nom saisi par l'utilisateur afin d'avoir un nom formater de la sorte "photo_de_ghislain"
	
    // ici je reformate le nom de la photo en tenant compte du propriétaire
	$nomDestination = "Photo_de_".$pseudo.".".$extensionFichier;
	if (move_uploaded_file($_FILES["monfichier"]["tmp_name"], $repertoireDestination.$nomDestination)) {
		
        echo "Votre photo a été bien uploadée";
    } else {
        echo "Le fichier n'a pas été uploadé (trop gros) ou ".
                "Le déplacement du fichier temporaire a échoué".
                " vérifiez l'existence du répertoire ".$repertoireDestination;
    }
}
?>

-
Edité par Sghislain 26 novembre 2015 à 16:35:13

OK, alors on va le faire ensemble. Je viens de finir le script AJAX te permettant de réaliser le bébé

On commence par le HTML:

		<div id="progress">
			<p> Upload en cours </p>
		</div>		
		
		<div id="success">
			<p> Upload reussi! </p>
		</div>	
		
				<form id="form" action="upload.php" method="post" enctype="multipart/form-data">
					<input type="file" name="userfile" id="file">
					<input type="submit" value="Upload Image" id="bouton" name="submit">
				</form>	
				
<!-- scripts js START -->
			<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
			<script type="text/javascript" src="ajax.js"></script> 
		<!-- scripts js END -->

Et le petit CSS qui va bien:

img
{
	margin-top: 100px;
	width: 150px;
	height: 150px;
	margin-left: 40px;
	border: 4px solid black;
	cursor: pointer;
}

#progress, #success
{
	display: none;
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 40px;
	top: 0;
	background: rgba(46,204,113,.75);
	text-align: center;
}

#progress p, #success p
{
	color: white;
	font-family: trebuchet ms;
	font-size: 16px;
}

#success
{
	top: 50%;
}

Ensuite, tu passes au script PHP en tant que tel:

		   // Option de l'upload
			  $allowed_filetypes = array('.JPG', '.jpg', '.jpeg', '.JPEG', '.gif','.bmp','.png','.PNG'); // Fichiers passant la validation.
			  $max_filesize = 524200000; // taille du paquet max
			  $upload_path = './uploads/'; // Directory.
			
			   $filename = $_FILES['userfile']['name']; // Nom du fichier 
			   $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Recuperation de l'extension
		 
		   // On verifie si le type de fichier va bien
		   if(!in_array($ext,$allowed_filetypes))
			  die('<p> Ce fichier n\'est pas pris en charge </p>');
		 
		   // On regarde la taille du fichier
		   if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize)
			  die('<p> Image trop grosse </p>');
		 
		   // On verifie si on peut ecrire dans le repertoire de destination
		   if(!is_writable($upload_path))
			  die('<p> Pas possible </p>');
		 
		   // On upload
		   if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $filename))
				 echo '<p> C\'est un success! </p>'; // youpi
			  else
				 echo '<p> Too bad, Ca plante... </p>'; //  Erreur pdt le transfert :(.

Vas-y, tu essayes chez toi et tu dis si ça marche. Tant que ça ne marchera pas chez toi, le AJAX ne servira à rien.

 Si ca marche bien, propose un premier script AJAX, au moins sa structure. On le reprendra ensemble

-
Edité par liototo 26 novembre 2015 à 16:44:25

ok je te reviens sous peu. merci

ça marche bien. ça copie le fichier uploader dans le dossier de destination

concernant la structure ajax,  je ne sais meme pas comment écrire un début de script ajax

Alors il est tant d'apprendre

Regarde un ou deux cours pour ne pas être perdu quand je te mettrai la solution!

ok mais bon j'ai fais un peu de bricolage avec ton script regarde

upload2.php

<?php
// Option de l'upload
   $allowed_filetypes = array('.JPG', '.jpg', '.jpeg', '.JPEG', '.gif','.bmp','.png','.PNG'); // Fichiers passant la validation.
   $max_filesize = 524200000; // taille du paquet max
   $upload_path = './uploads/'; // Directory.
  
    $filename = $_FILES['userfile']['name']; // Nom du fichier
    $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); // Recuperation de l'extension
 
// On verifie si le type de fichier va bien
if(!in_array($ext,$allowed_filetypes))
   die('<p> Ce fichier n\'est pas pris en charge </p>');
 
// On regarde la taille du fichier
if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize)
   die('<p> Image trop grosse </p>');
 
// On verifie si on peut ecrire dans le repertoire de destination
if(!is_writable($upload_path))
   die('<p> Pas possible </p>');
 
// On upload
if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $filename))
      echo '<p style="background-color:#4a7e3f;font-weight: bolder; color: white; border-radius: 4px 4px 4px 4px; width: 200px; height: 25px; text-align: center; transition: 0.2s"> C\'est un success!</p>'; // youpi
   else
      echo '<p> Too bad, Ca plante... </p>'; //  Erreur pdt le transfert :(.
        ?>
             
         
                <form id="form" action="upload2.php" method="post" enctype="multipart/form-data">
                    <input type="file" name="userfile" id="file">
                    <input type="submit" value="Upload Image" id="bouton" name="submit">
                </form> 

                
                        <img src="uploads/<?php echo $filename; ?>"width="180" height="200"/>

                            <div id="msg">Votre image</div>
                         
                
                 
<!-- scripts js START -->
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
            <script type="text/javascript" src="ajax.js"></script>
            <link rel="stylesheet" type="text/css" href="index.css"/> 
        <!-- scripts js END -->

 et voici l'index

 
         
                <form id="form" action="upload2.php" method="post" enctype="multipart/form-data">
                    <input type="file" name="userfile" id="file">
                    <input type="submit" value="Upload Image" id="bouton" name="submit">
                </form>  
                 
<!-- scripts js START -->
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
            <script type="text/javascript" src="ajax.js"></script>
            <link rel="stylesheet" type="text/css" href="index.css"/> 
        <!-- scripts js END -->

ça marche mdrir mais je veux apprendre l'Ajax. donc je commence par le début comme tout le monde

OK cool. Vas-y, tente un peu en AJAX :) 

Je te donnerai une solution dans tous les cas. C'est le moment de booster ton savoir

ok compris je te reviens peut être en privé pour te montrer ma solution ajax

merci pour toutes tes réponses c'est gentil de te part

Attention, il ne faut pas confondre type MIME et extension. Là la vérification se fait sur l'extension du fichier. Il y a un exemple sur la doc PHP pour récupérer le type MIME.