Discussion :

[Nicolasoliv]

Bonjour,

Alors voilà, j'ai un site avec un formulaire qui marche parfaitement sur Chrome et Firefox mais comme par hasard ça plante sur ie (le navigateur utilisé dans mon entreprise).

Voici mon code côté formulaire :

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
$(function () {
        $('#my_form').on('submit', function (e) {
            //$('#alert-envoi').show();
            //$('#idelibre').hide();
            // On empêche le navigateur de soumettre le formulaire
            e.preventDefault();
 
            var $form = $(this);
            var formdata = (window.FormData) ? new FormData($form[0]) : null;
            var data = (formdata !== null) ? formdata : $form.serialize();
            var date = $("#date").val();
            var type = $($('input[type=radio][name=seance]:checked')).val();
            formdata.append("date", date);
            formdata.append("type", type);
            formdata.append("nbAnnexe", $("#nbAnnexe").text());
            formdata.append("nbRapport", $("#nbRapport").text());
            formdata.append("data_json", $("#data_json").text());
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                contentType: false, // obligatoire pour de l'upload
                processData: false, // obligatoire pour de l'upload
                data: data,
                success: function (response) {
                    $('#response').html(response);
                    }
                },
            });
        });
    });

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
<form id="my_form" role="form" method="post" action="action/envoi.php" enctype="multipart/form-data">
     <div class="step" style="text-align: center">
           <p>Sélectionner la convocation à envoyer aux différents acteurs</p></br>
                <div class="form-group">
                      <div class="input-group input-file" name="convocation">
                           <span class="input-group-btn">
                                  <button class="btn btn-default btn-choose" type="button" style="
                                                background-color: #eaeaea;
                                                ">
                                       Télécharger la convocation <span class="glyphicon glyphicon-download" aria-hidden="true"></span> 
                                   </button>
                             </span>
                             <input type="text" name="convocation" class="form-control" placeholder='Choisissez un fichier...'/>
                        </div>
                  </div>
       </div>
</form>

Et côté serveur

Code :

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

echo $_FILES['convocation']['name'];

Rien n'est exécuté et je n'arrive pas à comprendre d'ou vient l'erreur

J'ajoute que quand je ne sélectionne pas de fichier ça fonctionne correctement, par contre quand j'en sélectionne un il n'y a plus rien d’exécuté côté serveur...

Vous avez une idée?

[mathieu]

regardez dans la console si les informations envoyées et récupérées par la requête correspondent à ce dont vous avez besoin

[Skyxia]

Avec une recherche Google j'ai croisé un problème du même type où on conseille de faire comme ceci :

Code :

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

1
2
3
 
<?php
$extension = pathinfo($_FILES['imageex']['name'], PATHINFO_EXTENSION);

Change "imageex" par "convocation" dans ton cas, ensuite tu fais un echo de $extension plutôt que de $_FILES.

Je sais pas si ça change quelque chose ou si ça pourra t'aider/t'inspirer :/

[Nicolasoliv]

Alors y a eu de nouveau mais le fonctionnement reste bizarre:

J'ai modifié mon appel AJAX et j'ai renseigné le paramètre async: false

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
33
34
35
36
37
$("form#data").submit(function () {
        $('#alert-envoi').show();
        $('#form').hide();
 
        var formData = new FormData($(this)[0]);
        var date = $("#date").val();
        var type = $($('input[type=radio][name=seance]:checked')).val();
        formData.append("date", date);
        formData.append("type", type);
        formdata.append("nbAnnexe", $("#nbAnnexe").text());
        formdata.append("nbRapport", $("#nbRapport").text());
        formdata.append("data_json", $("#data_json").text());
 
 
        setTimeout(function () {
            $.ajax({
                url: "action/envoi.php",
                type: 'POST',
                data: formData,
                async: false, //asyn: true, bug sous IE
                success: function (response) {
                    if ($.trim(response) === "ok") {
                        Passerelle();
                    } 
                }, complete: function (response, resultat, statut) {
                    $('#form').show();
                    $('#alert-envoi').hide();
                },
                cache: false,
                contentType: false,
                processData: false
            });
        }, 5);
 
 
        return false;
    });

Depuis que la fonction est synchrone, le traitement est bien exécuté côté serveur. Sinon il ne se passe rien.
Problème, maintenant que ma fonction est synchrone, mon GIF de chargement est bloqué...Auriez-vous une solution?

[ABCIWEB]

Salut,

Tu ne nous as pas dit de quelle version IE il s'agit, c'est important pour comprendre ! C'est quelle version ?

Es-tu certain que les données que tu envoies sont conformes au format de données accepté dans les URL ? Apparemment tu ne t'en soucis pas puisque je ne vois null part l'utilisation de "encodeURIComponent" sur les chaînes de caractères ou de la méthode "$.param" de jquery sur les tableaux.

Et ton fichier, tu le joins où dans ta requête ? Je ne vois que 5 formData.append mais rien pour le fichier ?

En tous cas, pas bon le async: false, je comprend pas trop comment cela a pu arrangé ton problème mais il n'y en a pas besoin pour uploader des fichiers avec IE10.

Tu peux regarder ici pour avoir une solution d'upload Ajax/Php toute prête et évolutive avec de très nombreuses options et fonctions disponibles. Pas moins de 18 exemples sont fournis tous directement fonctionnels, suffit de décompresser l'archive zip et de poser le dossier sur ton serveur et c'tout

Les exemples fournis vont du plus simple avec quelques lignes de code pour déjà bénéficier de toutes les fonctionnalités avancées :
- retour d'informations en temps réel (une dizaine disponibles), affichage des vignettes photo (si photo), sauvegarde automatique et reprise d'upload pour les gros fichiers, surpassement des limites serveur "post_max_size" and co, drag and drop etc.
jusqu'à l'implémentation de plugin Jquery pour retourner les informations EXIF d'une photo ou encore pour permettre un recadrage (crop) avant upload. Le tout agrémenté si besoins de styles et fonctions événementielles pour plus se souplesse et de possibilités pour rendre le formulaire dynamique. Bref y'a de quoi faire...

[Nicolasoliv]

Salut,

Tu ne nous as pas dit de quelle version IE il s'agit, c'est important pour comprendre ! C'est quelle version ?

Es-tu certain que les données que tu envoies sont conformes au format de données accepté dans les URL ? Apparemment tu ne t'en soucis pas puisque je ne vois null part l'utilisation de "encodeURIComponent" sur les chaînes de caractères ou de la méthode "$.param" de jquery sur les tableaux.

Et ton fichier, tu le joins où dans ta requête ? Je ne vois que 5 formData.append mais rien pour le fichier ?

En tous cas, pas bon le async: false, je comprend pas trop comment cela a pu arrangé ton problème mais il n'y en a pas besoin pour uploader des fichiers avec IE10.

Tu peux regarder ici pour avoir une solution d'upload Ajax/Php toute prête et évolutive avec de très nombreuses options et fonctions disponibles. Pas moins de 18 exemples sont fournis tous directement fonctionnels, suffit de décompresser l'archive zip et de poser le dossier sur ton serveur et c'tout

Les exemples fournis vont du plus simple avec quelques lignes de code pour déjà bénéficier de toutes les fonctionnalités avancées :
- retour d'informations en temps réel (une dizaine disponibles), affichage des vignettes photo (si photo), sauvegarde automatique et reprise d'upload pour les gros fichiers, surpassement des limites serveur "post_max_size" and co, drag and drop etc.
jusqu'à l'implémentation de plugin Jquery pour retourner les informations EXIF d'une photo ou encore pour permettre un recadrage (crop) avant upload. Le tout agrémenté si besoins de styles et fonctions événementielles pour plus se souplesse et de possibilités pour rendre le formulaire dynamique. Bref y'a de quoi faire...

Ah oui excusez-moi, je suis sous IE10.

Alors non je ne sais pas du tout de quoi il s'agit, je ne suis pas le plus expérimente en JQuery/Ajax mais si tu peux m'en dire plus j'en suis preneur, c'est peut être là d'ou vient mon problème.

Alors c'est un tuto que j'ai suivi, le fichier serait envoyé dans le

Code :

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

 var formData = new FormData($(this)[0]);

. En tous cas il est bien envoyé

Merci pour ta source, je regarderais ça de plus près demain, très intéressant tout ça

[ABCIWEB]

Ah ok, je ne l'utilise pas comme cela car j'ai besoin de fragmenter les fichiers quand ils dépassent les limites serveur (et c'est ce qui me permet aussi de faire des sauvegardes partielles). Mais pour en revenir à ta syntaxe, puisque justement tu passes le formulaire dans le constructeur de FormData, tous les champs devraient être passés et je comprends pas les valeurs que tu ajoutes dans les append. A quoi correspondent-ils dans ton formulaire ? Tu as modifié ton formulaire depuis ton premier post ? Ou s'ils ne proviennent pas du formulaire il faudrait peut être vérifier leurs existence avant de chercher leur valeur.

Et comme disait mathieu, vérifies dans la console (rubrique réseau) si toutes tes données sont bien formées lors de l'envoi du post. Il y a bien un problème quelque part dans ton code car je te confirme qu'il n'y a pas de souci particulier pour envoyer un fichier avec new FormData et IE10 et sans besoin d'une requête synchrone.