Récupérer valeur file et envoyer onChange à une page php par POST
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:
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:
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:
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> |
