Récupérer un valeur input file d'une modal

Version imprimable

Bonjour à tous,

Voici mon soucis :

Je fais sélectionner un fichier dans un input file dans une modale. Hors je n'arrive pas à récupérer la valeur lors de la validation dans la fenêtre parent.

Voici mon formulaire :

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
33
34
35
36
37
 
<form id="my_form" method="post" action="process_form.php" enctype="multipart/form-data">
    <input type="text" name="title">
    <textarea name="content"></textarea>
 
 
	<button class="btn btn-primary " type="button" onclick='image()'><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">Image</span></button>
 
 
 
<div class="modal inmodal" id="infoImage" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <i class="fa fa-info modal-icon"></i>
                            <h4 class="modal-title">Choisissez une  belle image </h4>
                            <small class="font-bold"></small>
                    </div>
                    <div class="modal-body">
                        <p></p>
							<div class="form-group">
							<input type="file" name="monfichier" accept="image/*">
 
 
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" id="annulerChoixClub">Annuler</button>
                        <button type="button" class="btn btn-primary" id="validerChoixClub" onclick="hide_modal()">Valider</button>
                    </div>
                </div>
            </div>
        </div>
</div>
		<button type="submit">OK</button>
 
</form>

Voici mon AJAX :

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
 
 
	<script>
	$(function () {
    $('#my_form').on('submit', function (e) {
        // 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();
 
        $.ajax({
            url:"uploadv3.php",
            type: $form.attr('method'),
            contentType: false, // obligatoire pour de l'upload
            processData: false, // obligatoire pour de l'upload
            dataType: 'json', // selon le retour attendu
            data: data,
            success: function (response) {
                // La réponse du serveur
            }
        });
    });
});

Cela n'envoi aucune image

Pour info quand j'enlève l'input du modal cela marche très bien.

Je ne comprend pas car le modal faisant partie de la page je devrais envoyer l'ensemble du formulaire ....

Quelqu'un aurait il une idée ?

Cordialement,

13/09/2016, 12h03
Invité
Bonjour,
- FormData
- Utiliser les objets FormData

Bonjour et Merci,

Vous voulez dire que j'envoi l'ensemble de mon formulaire via formdata ?

du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var form = document.forms.namedItem("my_form");
form.addEventListener('submit', function(ev) {
 
  var oData = new FormData(document.forms.namedItem("fileinfo"));
 
 
 
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "uploadv3.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
    }
  };
 
  oReq.send(oData);
  ev.preventDefault();
}, false);

Cordialement,

13/09/2016, 13h47
Invité

Lis le tuto jusqu'au bout...
ça parle aussi de jQuery.

Apprendre prend un certain temps. Et un temps certain.
14/09/2016, 12h29
Fabien.bontemps

:mrgreen:

OK mais peut importe comment je le passe il ne veut pas envoyer ma modal.

Je pense que ma modal est généré en dehors de mon form du coup ......
14/09/2016, 19h46
ABCIWEB

Citation:

Envoyé par Fabien.bontemps

:mrgreen:
Je pense que ma modal est généré en dehors de mon form du coup ......

Ben alors, t'as trouvé la solution, y'a plus qu'à...

En même temps tu te prends la tête pour rien avec ta modale. Cliquer sur un bouton pour ouvrir une fenêtre modale dans laquelle on va trouver un bouton de téléchargement... Pourquoi pas proposer directement un bouton de téléchargement personnalisé sans passer par une fenêtre modale ?

Si besoin tu peux trouver une solution d'upload ajax/php ici. C'est pour donner des exemples d'intégration d'upload personnalisés ou optionnels sans besoin de passer par une fenêtre modale. Au passage ce module permet de surpasser les limitations serveur et possède des retours d'information en temps réel personnalisables. Il y a une quinzaine d'exemples directement utilisables si on utilise php côté serveur (upload mulitples, crops, redimensionnements, formulaire d'inscription avec avatar, etc.), il faut donc moins de cinq minutes pour le tester puisqu'il suffit de décompresser le zip et de poser le répertoire sur ton serveur.

Sur le principe si tu veux envoyer tout ton formulaire en ajax, il faut enregistrer toutes tes données dans un form data comme indiqué par jreaux62. Sinon tu peux générer un input file dans ton html mais évidemment à l'intérieur de ton formulaire (solution la plus simple mais la moins élégante car demandera un rafraichissement de la page et pas de possibilité d'informations en temps réel sur l'upload).

En ajax il existe aussi plusieurs variantes suivant les besoins. Envoyer les données et le fichier en même temps, ou encore envoyer les données textuelles dans une première requête puis enchainer automatiquement par l'upload du ou des fichiers, ou l'inverse en fonction des priorités. Bref c'est un vaste sujet...