[AJAX] upload une image et l'afficher

Version imprimable

13/05/2009, 10h43
lenetfm

[AJAX] upload une image et l'afficher

Salut tout le Monde
je suis entrain de developper un PFE (Gestion d'une Bibliotheque Central)
et je dois uploadé des images pour les emprunteurs
ce que je veut faire c'est que quand on click sur le input de type="file"
et aprés choisi le fichier a upload ca declenche un evenement qui envoie le fichier au serveur et aprés fini l'upload il reaffiche l'image dans la meme page
es que vous pouvez m'indique le chemain a prendre
Merci D'avance les amis :mouarf:

Bon allez j'ais pas le temps alors je te donnes un model type ... :D

N' oublies pas que ces PHP ont des noms et que si tu les changent
il faut les changer DANS les php également ...

Tu trouvera dans le deuxiéme le répertoire relatif de destination
0workdesti a toi de mettre ce que tu veux 8O

Donc
upload_base_saisie.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?PHP             
if (isset($_GET["message"])) $message=trim($_GET["message"]);
    else $message="";
if (isset($_GET["Limg"])) $Limg=trim($_GET["Limg"]);
    else $Limg="";
?>
<html><body>
<br /><br /><br />
<p align=center>
<?PHP
echo ("".$message."<br />");
if ($Limg!="") echo ("<img src='".$Limg."' alt='' ><br />");
?>
 
<br /><br /><br />
<form name="formulaire" method="POST"
 action="upload_base_upload.php"  enctype="multipart/form-data" >
 <input type="hidden" name="MAX_FILE_SIZE" value="40000" />
 <input id="fichier1"  name="fichier1" type="file"  /><br />
 <input value="Valider" name="submit" type="submit" />
</form>
</p>
</body>
</html>

upload_base_upload.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<?php
if (isset($_FILES['fichier1'])) $LeFic=trim($_FILES['fichier1']['name']);
    else $LeFic="";
$message="";
if(  $LeFic!="" )
 {
 $poid_max="40000"; 
 $destin="0workdesti/"; 
 $taille = getimagesize($_FILES['fichier1']['tmp_name']);
 $poid = filesize($_FILES['fichier1']['tmp_name']); 
 $message="";
 
 if(substr($LeFic,-3) !="jpg")
   {$message="L image doit etre au format jpeg jpg";}
 if ($poid>$poid_max)
  {$message=" l image est trop lourde ... 40 Ko maxi";}
 if ($poid<=$poid_max && $message=="")
  {
   // === on supprime les accents et les espaces du nom de l'image 
   $LeFic = strtr($LeFic,  "ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ",   
    "aaaaaaaaaaaaooooooooooooeeeeeeeecciiiiiiiiuuuuuuuuynn");  
   // === on supprime les espaces
   $LeFic=str_replace(" ","_",$LeFic);
   // === on met en minuscule
   $LeFic=strtolower($LeFic); 
   $newnom=$destin.$LeFic;
   if (file_exists($destin.$LeFic))
     {
        $message="L image est déjas sur le site web";
     }
     else
      {
      copy($_FILES['fichier1']['tmp_name'],$destin.$LeFic);
      $imagefile=$destin.$LeFic;
      $src_img = imagecreatefromjpeg($imagefile);
      $message="L image ".$newnom." est copiée";
     }
  }
 }
 
$Limg=$imagefile;
print "<script type='text/javascript'>window.location='upload_base_saisie.php?Limg=".$Limg."&message=".$message."'</script>";
exit;
?>

Citation:

Envoyé par FoxLeRenard

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?PHP             
if (isset($_GET["message"])) $message=trim($_GET["message"]);
    else $message="";
if (isset($_GET["Limg"])) $Limg=trim($_GET["Limg"]);
    else $Limg="";
?>
<html><body>
<br /><br /><br />
<p align=center>
<?PHP
echo ("".$message."<br />");
if ($Limg!="") echo ("<img src='".$Limg."' alt='' ><br />");
?>
 
<br /><br /><br />
<form name="formulaire" method="POST"
 action="upload_base_upload.php"  enctype="multipart/form-data" >
 <input type="hidden" name="MAX_FILE_SIZE" value="40000" />
 <input id="fichier1"  name="fichier1" type="file"  /><br />
 <input value="Valider" name="submit" type="submit" />
</form>
</p>
</body>
</html>

upload_base_upload.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<?php
if (isset($_FILES['fichier1'])) $LeFic=trim($_FILES['fichier1']['name']);
    else $LeFic="";
$message="";
if(  $LeFic!="" )
 {
 $poid_max="40000"; 
 $destin="0workdesti/"; 
 $taille = getimagesize($_FILES['fichier1']['tmp_name']);
 $poid = filesize($_FILES['fichier1']['tmp_name']); 
 $message="";
 
 if(substr($LeFic,-3) !="jpg")
   {$message="L image doit etre au format jpeg jpg";}
 if ($poid>$poid_max)
  {$message=" l image est trop lourde ... 40 Ko maxi";}
 if ($poid<=$poid_max && $message=="")
  {
   // === on supprime les accents et les espaces du nom de l'image 
   $LeFic = strtr($LeFic,  "ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ",   
    "aaaaaaaaaaaaooooooooooooeeeeeeeecciiiiiiiiuuuuuuuuynn");  
   // === on supprime les espaces
   $LeFic=str_replace(" ","_",$LeFic);
   // === on met en minuscule
   $LeFic=strtolower($LeFic); 
   $newnom=$destin.$LeFic;
   if (file_exists($destin.$LeFic))
     {
        $message="L image est déjas sur le site web";
     }
     else
      {
      copy($_FILES['fichier1']['tmp_name'],$destin.$LeFic);
      $imagefile=$destin.$LeFic;
      $src_img = imagecreatefromjpeg($imagefile);
      $message="L image ".$newnom." est copiée";
     }
  }
 }
 
$Limg=$imagefile;
print "<script type='text/javascript'>window.location='upload_base_saisie.php?Limg=".$Limg."&message=".$message."'</script>";
exit;
?>

Merci pour ta reponse mais ce que je veux faire c'est que quand je choisi un fichier (image je suppose) et j'affiche un aperçu dans la meme page pour
que l'utilisateur peu voir l'image qu'il veu uploadé
Merci d'avance

22/05/2009, 19h15
Bovino

Tu ne peux pas avoir un aperçu de l'image avant de l'avoir uploadée ! Même si tu considères qu'avoir un tel accès au poste de l'utilisateur ne pose pas de problème de sécurité !
22/05/2009, 19h51
lenetfm

Citation:

Envoyé par Bovino

Tu ne peux pas avoir un aperçu de l'image avant de l'avoir uploadée ! Même si tu considères qu'avoir un tel accès au poste de l'utilisateur ne pose pas de problème de sécurité !

ok he ben et si je l'upload en utilisant ajax et je l'affiche dans la meme page es que c'est possible ?
j'ai essai avec ajax mais ca marche pas pk je ne sais pas :(
Merci pour la reponse
22/05/2009, 19h55
Bovino

Non, il ne me semble pas que tu puisses passer un input de type file via Ajax.
22/05/2009, 20h16
lenetfm

Citation:

Envoyé par Bovino

Non, il ne me semble pas que tu puisses passer un input de type file via Ajax.

Merci pour la reponse tu sais un tutoriel pour le faire a laide d'une iframe cache Merci d'avance
22/05/2009, 23h42
emmanuel.remy

Salut,

Si tu veux avoir une prévisualisation de l'image avant de l'envoyer (un peu comme font les site de tirages photos), alors utilise plutôt une applet Java.

ERE
23/05/2009, 15h47
lenetfm

Citation:

Envoyé par emmanuel.remy

Salut,

Si tu veux avoir une prévisualisation de l'image avant de l'envoyer (un peu comme font les site de tirages photos), alors utilise plutôt une applet Java.

ERE

Merci pour l'astuces
c'est trés pratique