Envoyer un fichier sans recharger toute la page

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 !

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 ?

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 !

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 :/

Quel est ton code JS ?

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é.

Tu aurais une page en ligne pour qu'on voit ce qu'il se passe réellement ? Avec tout ton code de préférence…

Au passage, c'est "envoi en cours", pas "envoie"

Yep, je vais mettre ça sur mon site

Merci pour la faute !

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.

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.

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.

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)

Oui, je suis bête 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.

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 :/

Tu charges ton JS dans <head>, il est donc exécuté avant que le DOM ne soit entièrement chargé.

Déplace ta balise <script> avant </body> et ça devrait aller mieux

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.

Il ressemble à quoi ce JS qui affiche la modale ?

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 :/

display n'est pas un attribut : essaie plutôt style.display

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 :/

Pourquoi tu ne mets pas tout simplement ton bouton dans le formulaire ?

L'iframe peut être mise autre part puisqu'elle est cachée.

Pour ce qui est de la cible du formulaire, il faut indiquer le name de ton iframe plutôt que l'id.