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