Discussion :

[karamaster]

Bonjour, je travaille sur un projet sur le quel l'utilisateur enregistre sa photo de profil après avoir recadrer ladite photo.
Je veux faire le traitement de la photo sur une fenêtre popup en lieu et place de la page. En d'autres termes, ajax appelle le fichier "upload_photo.php" dans une fenêtre en lui envoyant par post FILE.
Je veux qu'à la sélection de la photo la fenêtre de traitement s'ouvre avec la photo à recadrer.

script du popup

Code :

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

1
2
3
4
5
6
7
8
9
<div id="popup_upload">
      <div class="form_upload">
          <span class="close" onclick="close_popup('popup_upload')">x</span>
                 <h2>Upload photo</h2>
                 <form action="#" name="formAjax" method="post" enctype="multipart/form-data" target="upload_frame">
                      <input type="file" name="photo" id="photo" class="file_input">                                                               
                </form>
       </div>
</div>

le fichier php qui ouvre la fenêtre : upload_photo.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
 
$photo_src = $_FILES['photo']['tmp_name'];
 
 
if (is_file($photo_src)) {
        // photo path in our example
        $photo_dest = 'images/photo_'.time().'.jpg';
        // copy the photo from the tmp path to our path
        copy($photo_src, $photo_dest);
        // call the show_popup_crop function in JavaScript to display the crop popup
        echo '<script type="text/javascript">window.top.window.show_popup_crop("'.$photo_dest.'")</script>';
}
?>

Script Ajax

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script language="javascript" type="text/javascript">
	$(document).ready( function() {
 
	  $("#photo").change(function() { 
        var tof = $('#photo').val();
		alert(tof);
			$.post('upload_photo.php', {'photo':tof}, function(data) {
				$('#results').html(data); // affichage des résultats qui doit se faire dans une fenetre
			});
         });
          });
</script>

[ABCIWEB]

Salut,

Regardes ce module d'upload. Dans le dossier en téléchargement tu pourras tester directement deux exemples fonctionnels de crop + upload. Ensuite tu pourras adapter à ta mise en page.

Cela ne répond pas directement à ta question de popup mais au moins tu partiras sur des exemples fonctionnels. Là avec tes extraits de code tu es très loin du compte, ce n'est pas la bonne méthode pour recadrer une photo juste avant de la télécharger (si c'est bien cela que tu veux faire).

[karamaster]

Salut ABCIWEB,
merci pour ta réponse. le tuto ne règle pas mon problème. je veux faire la validation du téléchargement de l'image sans passer par l'étape de clic sur boutton "envoyer".

Pourquoi?
Ma fenêtre qui me permet de chargé l'image se trouve dans un formulaire "inscription". Donc en validant par un bouton submit j'envoi en même temps le formulaire inscription.


schéma de mon code

Code html :

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
<form id="form" method="post" action="_inscription.php" class="form-inline form-horizontal" enctype="multipart/form-data">
.......
.......
.......
 
 <div class="col-lg-5 col-sm-5">
  <span class="upload_btn" onclick="show_popup('popup_upload')">Photo de profil</span>
  <div id="photo_container"></div>
 
  <!-- The popup for upload new photo -->
   <div id="popup_upload">
        <div class="form_upload">
            <span class="close" onclick="close_popup('popup_upload')">x</span>
            <h2>Photo de profil</h2>
            <form action="upload_photo.php" id="formAjax" method="post" enctype="multipart/form-data" target="upload_frame">
                   <input type="file" name="photo" id="photo" class="file_input" onChange="popup()">
                   <div id="loading_progress"></div>
                   <!--<input type="submit" value="Upload photo" id="upload_btn">-->
             </form>
 
            <iframe name="upload_frame" class="upload_frame"></iframe>
        </div>
</div>
</div>
</form>

Fonction popup

Code :

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
<script language="javascript" type="text/javascript">
 
  function popup() { alert('test');
	var photoÂ*= document.getElementById('photo').value;
	var xhrÂ*Â*= getXMLHttpRequest();
	var urlÂ*  = 'upload_photo.php';
	Â*
	Â*
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			window.open(upload_photo.php?data= ' +' xhr.responseText ', '_blank',' location=0', 'status=0', 'scrollbars=1', 'width=1150', 'height=550); = xhr.responseText;
		}
	}
	Â*
	xhr.open("POST", url, true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send();
	Â*
}

fichier upload_photo.php

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
<?php
/*
* Author : Ali Aboussebaba
* Email : bewebdeveloper@gmail.com
* Website : http://www.bewebdeveloper.com
* Subject : Crop photo using PHP and jQuery
*/
 
// get the tmp url
//$photo_src = $_FILES['photo']['tmp_name'];
 
 
$photo_src = $_POST['photo'];
// test if the photo realy exists
if (is_file($photo_src)) {
	// photo path in our example
	$photo_dest = 'images/photo_'.time().'.jpg';
	// copy the photo from the tmp path to our path
	copy($photo_src, $photo_dest);
	// call the show_popup_crop function in JavaScript to display the crop popup
	echo '<script type="text/javascript">window.top.window.show_popup_crop("'.$photo_dest.'")</script>';
}
?>

[ABCIWEB]

Salut,

C'est pas un tuto mais une classe prête à l'emploi

Sinon je comprend pas trop ton problème, pourquoi veux-tu charger l'image avant d'envoyer le formulaire ?
D'ailleurs tu va la télécharger où et avec quelle relation en bdd si l'utilisateur n'est pas encore inscrit ?
Si tu veux faire deux étapes distinctes il faut enregistrer le visiteur (ou qu'il soit authentifié) avant de pouvoir soumettre une photo pour pouvoir la relier à son auteur.

En plus les popup c'est vraiment pas conseillé, tout le monde les évite aujourd'hui car beaucoup d'utilisateurs règlent leur navigateur pour empêcher l'ouverture des popup qui sont la plupart du temps de la pub intempestive.

Pourquoi ne pas tout envoyer en même temps, le formulaire d'inscription et la photo recadrée ?

[karamaster]

Ok, je te reviens.