Discussion :

[Johngtrs]

Bonjour,

J'ai créé une page de profil pour les internautes inscrits sur le site, mais il me manque un élément qui est, la photo de profil.

J'aimerais savoir comment on fait, lorsque l'on clic sur le bouton parcourir, proposer une fenêtre pour aller chercher l'image sur son pc, et la récupérer pour pouvoir l'afficher à chaque fois que la personne consulte son profil.

Merci d'avance.

John.

[Celira]

Le clic sur le bouton parcourir va ouvre automatiquement une fenêtre de parcours des ficheirs de l'utilisateur (c'est quand même à ça que sert le champ input file...)

Après, ben tu enregistres le fichier quelque part sur ton serveur (genre dans un dossier images_profils) et tu enregistres d'une façon ou d'une autre le lien entre l'utilisateur et l'image mémorisée.
Les formulaires et PHP5 : envoi de fichier

[Johngtrs]

Je ne connaissais pas les input de type file, merci ^^.

Sinon pour enregistrer l'image dans un dossier de mon serveur et changer le lien vers le dossier, je ne vois pas comment m'y prendre.

Tu pourrais me donner une petite piste s'il te plait ?

edit : En fait j'aimerais que sur le onclick du bouton enregistrer, avec ajax j'envoie au serveur.php, le lien de l'image pour l'enregistrer dans ma base de données postgre. Et puis bien sur enregistrer l'image dans un dossier de mon serveur.

[Bovino]

Tu ne peux pas envoyer de fichier avec AJAX.

Pour le reste, tout est expliqué dans le lien fourni par Celira !

[Johngtrs]

A mince dommage .

Sinon avec :

Code php :

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

basename(__FILE__);

en paramètre je mets le lien vers le dossier où l'image va être enregistrer ?

du genre "http://localhost/nom_site/image_profil" ?

[Johngtrs]

Ah ! J'ai enfin réussi grâce au lien de Celira

Merci beaucoup.

[Magnum8760]

Bonjour, dites c'est la seule technique pour ajouter une photo de profil ? merci

--> https://g-rossolini.developpez.com/t...ratique#LIII-B

[wehtam]

Tu ne peux pas envoyer de fichier avec AJAX.

Pour le reste, tout est expliqué dans le lien fourni par Celira !

On peut parfaitement envoyer un fichier avec AJAX, voici un exemple :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<form action="#" id="form_info" method="post" class="form-horizontal" enctype="multipart/form-data">
            <div class="form-body">
 
   <div class="form-group">
          <label class="control-label col-md-3">Fichier <span class="required">*</span></label>
 
                                            <div class="col-md-4">
                                                <input type="file" name="Fichier" data-required="1" value="" id="file"/>
                                            </div>
                                        </div>
 
 
                                        <div class="form-actions">
                                            <div class="row">
                                                <div class="col-md-offset-3 col-md-9">
                                                    <button type="button" class="btn green" id="btn_submit">
                                                        Enregistrer
                                                    </button>
 
                                                </div>
                                            </div>
                                        </div>
                                </form>
 
<script>
     $("form#form_info").submit(function () {
 
 
 
                var formData = new FormData($(this)[0]);
                console.log(formData);
 
                $.ajax(
                    {
                        url: 'save-document.php',
                        type: "POST",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data, textStatus, jqXHR) {
 
 
 
                            //data: return data from server
                            var retour = $.parseJSON(data);
                            console.log(retour.success);
                            if (retour.success == true) {
                              alert('upload ok');
                            } else {
                               alert('upload ko');
                            }
 
                            //
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            //if fails
 
                        }
                    });
 
 
            return false;
        })
 
        $('#btn_submit').on('click', function () {
 
 
 
                $("form#form_info").submit();
 
 
 
        })
</script>