Envoyer un fichier sans recharger toute la page

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,
j'aimerais envoyer un fichier sur mon serveur sans recharger la page, pour cela, j'ai suivi le tuto de Thundersed ici. Cependant, quand je clique sur envoyer, la page entière est rechargée, et non juste l'iframe. Comment faire pour ne pas recharger la page entière ? Voici mon code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="contenu"><form method="post" action="image.php" enctype="multipart/form-data" id="form-upload-image" target="frame-upload-image">
        <div> 
            <!-- mon formulaire... -->
            <input type="submit"/>              
          </div>
     </form>

    <div id="info-upload-image">
        <div id="status-upload-image">En attente de traitement.</div>
        <iframe id="frame-upload-image" name="frame-upload-image" style="display:none;"></iframe>
    </div>
</div>

Merci d'avance !

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0

Salut !

Est-ce que tu as bien mis le code JavaScript nécessaire ?
Est-ce que tu es certain que ton HTML est bien formé ?
As-tu tenté d'utiliser d'autres IDs, notamment sans tirets ?
Quel navigateur utilises-tu ?

Édité par Ymox

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0
Auteur du sujet

Le HTML fourni est celui généré par le serveur, le code source d'origine ayant du PHP à l'intérieur.
Non, je n'ai pas tenté d'autres ID, je vais essayer ça ce soir, mais ça serait fou que ce soit ça !
J'utilise Chrome, c'est vrai que j'ai pas tenté sur d'autres navigateurs !

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

J'ai changé le nom du frame en enlevant les tirets à frame-upload-image, sans succès. J'ai également essayé le formulaire sur Firefox et j'ai le même problème…
Je ne comprends pas :/

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

J'ai deux morceaux de codes :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function uploadEnd(error, path) 
{

    if (error === 'OK') 
    {
        document.getElementById('uploadStatus').innerHTML = '<a href="' + path + '">Upload done !</a><br /><br /><a href="' + path + '"><img src="' + path + '" /></a>';
        //Créer ou récupérer le code Markdown.
        //Vider le formulaire (y compris le champs fichier)
        //Fermer la fenêtre modale (cocher la case)
    } 
    else 
    {
        document.getElementById('uploadStatus').innerHTML = error;
    }
}

et

1
2
3
document.getElementById('form-upload-image').addEventListener('submit', function() {
    document.getElementById('status-upload-image').innerHTML = 'Envoie en cours...';
}, true);

Mais vu que toute la page est rechargé, rien ne se passe ; même le fichier image.php n'est pas exécuté.

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

Voilà le lien, il faut cliquer sur l'icône image pour afficher la boîte de dialogue.

Ce qui est bizarre c'est qu'une fois la page rechargée, les données du formulaire sont présente dans l'URL.

PS : la page image.php se contente de faire ça,

1
2
3
4
<?php

    echo 'fichier image.php';
    exit();

NB : l'input et le bouton envoyer ont la même fonction, c'est jusqu'au début je pensais que c'était le bouton qui marchait pas.

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0
Staff

Si tu regardes le code source interprété par le navigateur, dans ta modal il n'y a aucune balise form, du coup le formulaire qui est pris en compte est celui qui prend toute l'éditeur de texte (qui n'a aucun attribut, soit dit en passant).

C'est tout simplement du au fait que ton formulaire d'upload est dans le formulaire de l'éditeur : les formulaires imbriqués ne sont pas possibles en HTML.

Édité par viki53

Auteur du sujet

Mince :/ Je savais pas ça ! Comment je pourrais résoudre ce problème en réalisant une fenêtre modale du même genre ? Je suppose qu'il faille passer par du JS ?

Pour la première balise form, il n'y a pas d'attribut (déjà pcq cette page est un exemple) mais aussi pcq la "page" qui gère le traitement c'est la même. Le routeur se charge de rediriger les données du formulaire au bon endroits.

La curiosité est le plus beau des défauts

+0 -0
Staff

Mince :/ Je savais pas ça ! Comment je pourrais résoudre ce problème en réalisant une fenêtre modale du même genre ? Je suppose qu'il faille passer par du JS ?

Il suffit de mettre ta modal en-dehors du formulaire principal, tout bêtement.

Pour la première balise form, il n'y a pas d'attribut (déjà pcq cette page est un exemple) mais aussi pcq la "page" qui gère le traitement c'est la même. Le routeur se charge de rediriger les données du formulaire au bon endroits.

Ça n'empêche pas de mettre des attributs, ne serait-ce que pour indiquer la méthode (POST ou GET) et la cible (page courante)

Auteur du sujet

Oui, je suis bête :p j'ai pas réfléchi, après, ça impose une certaine refonte de mon code !

Oui, dans mon code d'origine j'ai bien mis la méthode et la cible (vide pour le coup). C'est jusque que là c'est un code d'exemple ;-)

Merci de ton aide, j'essayerais de réorganiser mon code en rentrant du boulot.

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

Rebonjour,
j'ai essayé de mettre la modale en dehors, malheureusement ça n'a pas l'air de marcher. Je suis sûr que c'est à cause de ce bout de code dans le CSS .modalCheck:checked + #overlay qui ne fonctionne plus puisque l'overlay n'est plus immédiatement à la suite. Ne sachant comment corriger ça en CSS (pour lui dire de chercher l'overlay ailleurs) j'ai réalisé une fonction JS qui est censé faire la même chose (voir le code source sur le site, la fonction JS est à la fin du fichier HTML). Elle est bien exécuté, mais la fenêtre ne s'affiche pas.
Je suis sûr que c'est un truc CSS à la con, mais je n'arrive pas à trouver ce qui cloche… :/

De plus, j'ai remarqué avec la console JS qu'il y a un petit problème pour trouver le formulaire :

1
Uncaught TypeError: Cannot read property 'addEventListener' of null

l'erreur correspond à cette ligne de script.js :

1
document.getElementById('form-upload-image').addEventListener('submit', function() {

or le formulaire est bien là, je ne comprend pas pourquoi il râle :/

Si vous avez une idée, merci d'avance ! Je tourne en rond depuis tout à l'heure :/

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

Merci, ça a corrigé l'erreur de la console :-)

Par contre je n'arrive toujours pas à voir pourquoi la fenêtre modale ne s'affiche plus quand on appuie sur le bouton, et ce malgré le JS.

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

En fait à la base, il n'y a pas de JS qui affiche la modale. Tout est réalisé dans ce bout de CSS :

1
2
3
.modalCheck:checked + #overlay{
    display: block;
}

Seulement voilà, maintenant que j'ai changé l'overlay de place, il n'est plus à la suite de la checkbox et donc ça ne marche plus. Pour palier ça, j'ai fait une fonction qui devrait réaliser la même chose :

1
2
3
4
5
function afficherBloc()
    {
        document.getElementById('overlay').display='block';
        alert('Fonction JS');
    }

Mais visiblement c'est pas suffisant, ou alors le CSS ne marche plus dans ces conditions. Mais j'ai beau cherché, je ne vois pas :/

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

Merci !! Je savais que c'était un truc à la con du genre ! ^^

Par contre maintenant le formulaire fonctionne bizarrement, si je clique sur le bouton envoyer (input), la page n'est pas rechargée et la cible du formulaire est chargée dans un nouvel onglet. Alors que si on clique sur envoyer (button), alors toute la page est rechargée. Pourtant le bouton se contente de faire un onclick="submit('form-upload-image')".

Comment faire pour ne pas ouvrir d'onglet et pour que le bouton fasse la même chose que le submit. De plus, bizarrement,

1
document.getElementById('overlay').style.display='none';

n'a pas l'air de marcher :/

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte