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
|
<html>
<head>
<script language="javascript">
var formInputs = new Array();
var xhrObject = new Array();
function ajax_call_multi( fichier, id, sync, addContent, xhrCount )
{
// Initilisation de xhr_count si nécessaire
if( !xhrCount )
xhrCount = 0;
// Initialisation de la variable d'état d'ajout de contenu
if( !addContent )
addContent = 0;
// Si le navigateur est Firefox, on crée l'objet XMLHttpRequest propre à firefox (fonctionne aussi avec Opera/Netscape)
if( window.XMLHttpRequest )
xhrObject[xhrCount] = new XMLHttpRequest();
else if( window.ActiveXObject ) // Si c'est Internet Explorer, on crée un nouvel objet ActiveX de type XMLHTTP
xhrObject[xhrCount] = new ActiveXObject("Microsoft.XMLHTTP");
else // Et si aucune des deux méthodes n'a fonctionné, on oublie AJAX !
{
alert( "Votre navigateur ne supporte pas le WEB2.0\nMerci d\'en utiliser un plus récent" );
return( false );
}
// Est-ce qu'on utilise le mode synchrône ou pas... ?!
if( sync == 1 ) // Mode synchrône
{
// L'objet est créé, on peut donc ouvrir la connexion. Le premier paramètre définit le mode d'envois des variables, GET ou POST
// Il est plus facil d'utiliser la méthode GET, j'expliquerai les raisons dans un avenir proche. Le deuxième paramètre correspond au script
// sur le serveur qui fera le traitement et enfin, true/false pour asynchrône/synchrone. Ici j'ai choisi ...? Synchrône
xhrObject[xhrCount].open( "GET", fichier, false );
// On envois la requête, ici sans contenu (null), mais il serait possible d'en envoyer.
xhrObject[xhrCount].send( null );
// Quand le serveur a terminé d'exécuter le script (état 4), on affiche le contenu retourné dans notre balise div
if( xhrObject[xhrCount].readyState == 4 )
window.document.getElementById( id ).innerHTML = xhrObject[xhrCount].responseText;
else
return( false );
}
else // Mode asynchrône, on utilise cette fois une seconde fonction qui va gérer l'état
{
xhrObject[xhrCount].onreadystatechange = function() { ajax_display_multi(xhrObject[xhrCount],id,xhrCount,addContent); };
// La différence est qu'il faut cette fois mettre le troisième paramètre à true
xhrObject[xhrCount].open( "GET", fichier, true );
xhrObject[xhrCount].send( null );
}
}
function ajax_display_multi( xhr, id, count, addContent )
{
if( xhr.readyState == 4 )
{
// Est-ce que l'on ajoute le nouveau contenu dans notre zone ou pas...
if( addContent == 1 )
window.document.getElementById( id ).innerHTML += xhr.responseText;
else
window.document.getElementById( id ).innerHTML = xhr.responseText;
}
}
</script>
</head>
<body style="background-color:#ffffff">
<div style="font-family:verdana;font-size:0.8em;margin:0px auto;padding:8px;width:400px;border:0px solid black;background-color:#ffffff;">
Transfert de fichiers (les extensions autorisées sont <i>jpg</i>,<i>gif</i>,<i>png</i> et <i>pdf</i>)
<p>
<div style="font-family:verdana;font-size:0.8em;border:1px;padding:4px;margin:0px;" id="file_status_1267375385">
<form name="file_1267375385" method="post" action="alt_index_upload.php" target="alt_index_upload" enctype="multipart/form-data">
<input type="hidden" name="htmlElement" value="file_status_1267375385"/>
<input type="file" name="fichier" onChange="document.file_1267375385.submit();document.getElementById('file_status_1267375385').innerHTML='Envoie en cours';">
</form>
</div>
<div id="inpList" style="margin:0px;padding:8px 0 4px 0;"></div><p><p>
<a href="javascript:void%200" style="font-family:verdana;font-size:0.8em;font-weight:bold;text-decoration:none;color:#143765;" onClick="ajax_call_multi('alt_index_ajax.php?action=add_file_input','inpList',0,1);" alt=""><img src="ajouter.png" border="0">Ajouter d'autres fichiers</a>
</div>
</body>
</html> |
Ajax/js InnerHTML affichage image
Répondre avec citation
Partager