[AJAX] Uploader sans recharger la page

**jeazy** · 15/04/2008, 16h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**madevilts** · 15/04/2008, 16h49

Tu veux dire que lorsque tu submit le formulaire, l'image n'apparait pas ?

**jeazy** · 15/04/2008, 16h57

en fait c'est les variables qui ne passent pas !
ca fait un simple appel de la page upload.php et pas un submit des données du formalaire

**madevilts** · 15/04/2008, 17h16

Envoyé par jeazy

en fait c'est les variables qui ne passent pas !
ca fait un simple appel de la page upload.php et pas un submit des données du formalaire

Lorsque tu cliques sur le input submit ?

**jeazy** · 15/04/2008, 18h34

Oui quand je clique sur mon boutton valider
En fait mon script d'upload marche de base:
j'ai un upload.html et un upload.php
dans le upload.html dans le form je fait un action="upload.php" et je clic sur submit et ca marche.

donc la j'essaye d'implémenter l'upload sans recharger la page ( avec un gif animé pour l'attente)
donc
dans mon form je voudrai faire une action du genre action='check_content("upload.php")'
mais une action ne peut prendre qu'une url et pas des fonctions.
donc j'ai testé dans un onsubmit='check_content("upload.php")'
ca m'envoie sur ma page upload.php sans recharger la page (avec le gif animé pour patienter durant le chargement) mais sans faire l'action submit qui me permet de récupérer mes variables ...

dsl si j'ai du mal a me faire comprendre

j'ai aussi tenter un de mettre ma fonction dans mon submit = idem ...

voila un petit lien pour mieux comprendre peut etre :p
http://jerom3.no-ip.org/test/

**jeazy** · 17/04/2008, 12h54

Personne n'a d'idée, ou un tutoriel simple pour arrive a mes fins ???
merci

**DoubleU** · 17/04/2008, 14h47

Je suis pas sur que ca soit possible de faire un upload en ajax aussi simplement que ca (à confirmer).

La technique classique pour y arriver, c'est d'utiliser une iframe invisible, donc un peu plus complexe mais il y a plein d'exemples sur le net

[AJAX] Uploader sans recharger la page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager