Chargement d'une image selon input file

**ToufBen** · 23/12/2013, 02h20

salut a tous et a toutes
je voudrais changer la source d'une image au moment ou l'utilisateur clique sur parcourir pour choisir son image
voila le code que je met :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function Chargerimage()
{
	fichier=document.getElementById('imgModif').files[0];
	Nomfichier = fichier.name;
	chemin =fichier.tmp_name;
	document.getElementById("imagegmodif").src=chemin; 
	//var fich=fso.GetFile("fichier");
       //alert("Nom Fichier est :"+Nomfichier+" chemin est :"+chemin);	
}

coté Html je met :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div><a ><img id="imagegmodif" alt="ImageModif" style="width:40em;height:25em" src="

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo "photos/".$RES['image_log']; ?>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

" /></a></div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div>
<input type="hidden" name="MAX_FILE_SIZE" value="5000000"  />
<input id="imgModif" style="font-size:1em;color:#3300FF" name="imgModif" type="file" onchange="javascript:Chargerimage();" /></div>

voila L'imprime écran(avant le selectionnement et après le selectionnement)

Invité · 23/12/2013, 10h13

bonjour

a moins d'avoir mal compris je dirait que c'est impossible

**ToufBen** · 24/12/2013, 14h17

Bonjour ,
Merci Mekal pour ta réponse, c'est vrai que ce n'est pas possible en Javascript mais c'est bien possible en AJAX, je suis passé par AJAX et ça fonctionne correctement.

je voudrais bien copier mon code ici pour vous apporter la sollution, mais il sera retiré par les web-master, vu que c'est un code AJAX et pas Javascript.

**NoSmoking** · 24/12/2013, 18h05

Bonjour,

mais il sera retiré par les web-master, vu que c'est un code AJAX et pas Javascript.

AJAX = Asynchronous JavaScript and XML.

N'hésite donc pas à mettre ta solution et à passer ta réponse en résolue

**ToufBen** · 24/12/2013, 20h06

Bonjour,

merci NoSmoking pour votre réponse bon voila ce que j'ai mis comme code Javascript+Jquery.

la fonction Chargerimage() contient la fonction upload("getImage.php",function(retour){....}) qui renvois les donnés de mon formulaire vers le fichier getImage.php, puis vérifier SI la fin du nom du fichier sélectionné contient ".jpg" ou ".JPG"....

je me demande s'il y a un moyen de savoir le type MIME du fichier, ce serai plus pratique que la vérification d'extensions.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function Chargerimage()
{
$("#matable").upload("getImage.php", function(retour) {
fichier=document.getElementById('imgModif').value;
fichier = fichier.toString();
ext = fichier.substring(fichier.lastIndexOf("."));
if(ext==".jpeg" || ext==".jpg" || ext==".JPEG" || ext==".JPG" || ext==".PNG" || ext==".png" || ext==".GIF" || ext==".gif" || ext==".bmp" || ext==".BMP") 
{
document.getElementById("imagegmodif").src="../photos/copiePhotos/"+document.getElementById('imgModif').value;
document.getElementById("AResultat").innerHTML="";
}
//alert(fichier);
else
{
document.getElementById("imagegmodif").src="";
document.getElementById("AResultat").innerHTML="Le Fichier n'est pas une Image !!";
}
});	
}

et le fichier getImage.php qui crée et redimensionne une image(physiquement) depuis l'image sélectionné et la stocker dans le dossier "photos/copiePhotos".

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getImage</title>
</head>
<?php $chemin=$_FILES['NimgModif']['tmp_name'];
$nom=basename($_FILES['NimgModif']['name']);
$rep_Dst="photos/copiePhotos/";
$size = getimagesize($chemin);
$TypeMime=($size['mime']=="image/jpeg" || $size['mime']=="image/png" || $size['mime']=="image/gif" || $size['mime']=="image/pjpeg" || $size['mime']=="image/x-png");
	$W_Src = $size[0];  // largeur
    $H_Src = $size[1];
	$condition=0;
	$extension = strrchr($_FILES['NimgModif']['name'], '.');
	$Wmax=500;$Hmax=500;
	if(($size['mime']=="image/jpeg") || ($size['mime']=="image/png") || ($size['mime']=="image/gif") || ($size['mime']=="image/pjpeg") || ($size['mime']=="image/x-png"))
	{
	if ($W_Src != 0 && $H_Src != 0) {
         $ratiox = $W_Src / $Wmax;  // ratio en largeur
         $ratioy = $H_Src / $Hmax;  // ratio en hauteur
         $ratio = max($ratiox,$ratioy);  // le plus grand
         $W = $W_Src/$ratio;
         $H = $H_Src/$ratio;   
         $condition = ($W_Src>$W) || ($H_Src>$H);
		 }
       //Hauteur original de l'image et calcule de Largeur
         if ($H_Src < $Hmax && $H_Src != 0) {
         $H = $H_Src;
         $W = $H * ($W_Src / $H_Src);
         $condition = $H_Src < $Hmax;  // 1 si vrai (true)
      }
       // -------------------------------------------------------------
       //Largeur Originale de l'image et calcule de l'hauteur
      if ($W_Src < $Wmax && $W_Src != 0) {
         $W = $W_Src;
         $H = $W * ($H_Src / $W_Src);         
         $condition = $W_Src < $Wmax;  // 1 si vrai (true)
      }
if($condition==1)
	  {
	  	switch($extension) {
		case '.JPG':
		case '.JPEG':
		case '.jpg':
         case '.jpeg':
 header('Content-Type: image/jpeg');
           $Ress_Src = imagecreatefromjpeg($chemin);
           $Ress_Dst = imagecreatetruecolor($W,$H);
		   imagecopyresampled($Ress_Dst, $Ress_Src, 0, 0, 0, 0, $W, $H, $W_Src, $H_Src);
		   imagejpeg($Ress_Dst,$rep_Dst.$nom,100);
		   move_uploaded_file($Ress_Dst,$rep_Dst.$nom);
		break;
	   case '.GIF':
		 case '.gif':
	   header('Content-Type: image/gif');
	   $Ress_Src = imagecreatefromgif($chemin);
           $Ress_Dst = imagecreatetruecolor($W,$H);
		   imagecopyresampled($Ress_Dst, $Ress_Src, 0, 0, 0, 0, $W, $H, $W_Src, $H_Src);
		   imagegif($Ress_Dst,$rep_Dst.$nom);
		   move_uploaded_file($Ress_Dst,$rep_Dst.$nom);
	   break;
	   case '.PNG':
         case '.png':
		 header('Content-Type: image/png');
           $Ress_Src = imagecreatefrompng($chemin);
           $Ress_Dst = imagecreatetruecolor($W,$H);
		   imagecopyresampled($Ress_Dst, $Ress_Src, 0, 0, 0, 0, $W, $H, $W_Src, $H_Src);
		   imagepng($Ress_Dst,$rep_Dst.$nom);
            // fond transparent (pour les png avec transparence)
           imagesavealpha($Ress_Dst, true);
           $trans_color = imagecolorallocatealpha($Ress_Dst, 0, 0, 0, 127);
           imagefill($Ress_Dst, 0, 0, $trans_color);
		   move_uploaded_file($Ress_Dst,$rep_Dst.$nom);
		   //header_remove();
           break;
		   header_remove();
		}
	imagedestroy ($Ress_Src);
        imagedestroy ($Ress_Dst);
	}
	}
?>
<body>
</body>
</html>

malheureusement ça ne fonctionne que sous Mozilla firefox pour l'instant

Chargement d'une image selon input file

JavaScript

Discussions similaires

Partager

Partager