[AJAX] Un petit formulaire compliqué
Bonjours a tous.
Voici mon probleme :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script type="text/javascript" src="ajax.js"></script>
<form methode="POST">
<input type="text" name="pseudo" />
<div id="avatar">
<form method="post" enctype="multipart/form-data" action="new_list.php">
<p>
<input type="file" name="fichier" size="30">
<input type="submit" name="upload" value="Uploader" onClick="go()">
</p>
</form>
</div>
<input type="submit" value="valider" />
</form> |
ajax.js
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
|
// JavaScript Document
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
}
xhr.open("POST","new_upload.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('avatar');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);
} |
et le script qui gere l'upload :
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
|
<?php
if( isset($_POST['upload']) ) // si formulaire soumis
{
$content_dir = ''; // dossier où sera déplacé le fichier
$tmp_file = $_FILES['fichier']['tmp_name'];
if( !is_uploaded_file($tmp_file) )
{
exit("Le fichier est introuvable");
}
// on vérifie maintenant l'extension
$type_file = $_FILES['fichier']['type'];
if( !strstr($type_file, 'jpg') && !strstr($type_file, 'jpeg') && !strstr($type_file, 'bmp') && !strstr($type_file, 'gif') )
{
exit("Le fichier n'est pas une image");
}
// on copie le fichier dans le dossier de destination
$name_file = $_FILES['fichier']['name'];
if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )
{
exit("Impossible de copier le fichier dans $content_dir");
}
?>
<input type="text" value="<?php echo $_FILES['fichier']['name']; ?>" />
<?php
}
?> |
En faite j'aimerai que lorsqu'on clique sur l'upload de photo , sa transform ma div avatar par le contenu de upload.php.
Tous sa en faite, pour envoyé d'abord l'images sur le serveur, et ajouté un nouveau input avec l'adresse de l'image ainsi uploadé
