Discussion :

[Fabien.bontemps]

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 :

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

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
 
 
	<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,

[Invit�]

Bonjour,

• FormData
• Utiliser les objets FormData

[Fabien.bontemps]

Bonjour et Merci,

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

du genre :

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
 
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,

[Invit�]

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


Apprendre prend un certain temps. Et un temps certain.

[Fabien.bontemps]

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

[ABCIWEB]

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