[AJAX] Uploader sans recharger la page
Bonjour je voudrai proposer une téléchargement pour mes visiteurs mais sans que ca recharge la page, juste afficher une image gif durant le chargement.
donc j'ai tester comme ceci
le formulaire (upload.html)
Code:
1 2 3 4 5 6 7 8 9 10 11 12
|
<html>
<head><script src='ajax.js'></script></head>
<body>
<form method="POST" name="form1" action="upload.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000">
Fichier : <input type="file" name="avatar">
<input type="submit" name="envoyer" value="Envoyer le fichier">
</form>
<div id="content"></div>
</body>
</html> |
l'ajax (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
| function makeObject(){
var x;
if (window.ActiveXObject) {
x = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
x = new XMLHttpRequest();
}
return x;
}
var request = makeObject();
var the_content;
function check_content(the_content){
request.open('get', the_content);
request.onreadystatechange = parseCheck_content;
request.send('');
}
function parseCheck_content(){
if(request.readyState == 1){
document.getElementById('content').innerHTML = '<img src=loading.gif>';
}
if(request.readyState == 4){
var answer = request.responseText;
document.getElementById('content').innerHTML = answer;
}
}
function check_content(the_content){
request.open('get', the_content);
request.onreadystatechange = parseCheck_content;
request.send('');
} |
et une page upload.php sans importance pour mon probleme
J'utilise ses fonctions pour charger mes pages avec une barre de chargement via un lien du style : onClick='check_content("upload.php")'
dans un href ca passe, par contre si je veut l'appeler via le formulaire ca ne fonctionne pas.
j'ai testé dans un onsubmit ca charge bien la page mais ca ne soumet pas le formulaire...
Dans l'obscurité, recherche de la lumière :D