Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué
    Envoyer des images depuis l'interface vers mon serveur
    Bonjour,

    On copain m'a préparé tous les fichiers pour faire mon serveur NodeJs et m'a présenté les bases. Je m'en débrouille pas trop mal mais la suis un peu perdu et j'ai besoin de votre aide. Vous l'avez compris je suis novice dans ce type de programmation

    Mes fichiers :
    Ma page HTML (avec mes fenêtres à afficher) : dico.html
    ici pour charger une image avec la fonction input file
    Code HTML :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
            <!-- ###################################################################################
                                    boite de dialogue => Image
            #################################################################################### -->  
            <form action="/form" method="post" enctype="multipart/form-data" id="ImageModal" class="modal fade" role="dialog">        
              <div aria-labelledby="ImageModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h3 class="modal-title" id="DicoModalTitle">Image ...</h3>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="" id="MotModalContent">
                        <form class="form" id="MotForm">                        
                          </H3>
                              <input type="file" name="fil" id="imageCorrige" accept="image/png, image/jpeg" />
                              <img  class="star" id="lImage">
                          </h3>
                        </form>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <h4>
                        <button type="button" style="float: left;" class="btnh btn-primary" id="annulerImage">Annuler</button>
                      </h4>
                      <h3>
                        <button type="button" style="float: left;" class="btnh btn-primary" id="supprimerImage">Pas d'image</button>
                      </h3>
                      <h2>
                        <button type="button" style="float: right;" class="btnh btn-primary" id="goImage">Enregistrer</button>
                      </h2>
                    </div>
                  </div> 
                </div>
              </div>
          </form>

    Mon fichier avec le javascript dico.js
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $("#goImage").click(function(){
            $('#CorrigeModal').modal('show');
            $('#ImageModal').modal('hide');
            alert("action demandée : enregistre l'image"); //       <----
        });


    et mon fichier route.js pour le serveur
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    const express = require('express');
    const path = require('path');
    var formidable = require('formidable');  
    var fs = require('fs');
    //var fse = require('fs-extra');  
    var app = express();
     
    var routeprincipale = express.Router();


    J'ai bien trouvé des codes mais ce que je n'arrive pas à faire c'est les utiliser correctement, soit j'ai des erreur de compilation soit rien ne se passe

    Je voudrais copier les images dans le dossier du serveur \src\public\Dicos\img pour pouvoir les réutiliser après dans mes pages web

    J'ai installé Formidable, j'ai vu rapidement un exemple mais je n'arrive pas à transposer

    Merci pour votre aide

    Note : mon programme peut utiliser soket.IO

  2. #2
    Membre habitué
    J'ai eu une illumination en buvant mon café.

    Ca fonctionne

    Je met les codes demain et je met résolu demain

    Merci

  3. #3
    Membre habitué
    dico.html
    Code html :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
    <!-- ###################################################################################
                                    boite de dialogue => Image
            #################################################################################### -->  
            <form action="/image" enctype="multipart/form-data" method="post" id="ImageModal" class="modal fade" role="dialog">        
              <div aria-labelledby="ImageModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h3 class="modal-title" id="DicoModalTitle">Image ...</h3>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="" id="MotModalContent">
                        <form class="form" id="MotForm">                        
                          </H3>
                              <input type="file" name="fil" id="imageCorrige" accept="image/png, image/jpeg" />
                              <img  class="star" id="lImage">
                          </h3>
                        </form>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <h4>
                        <button type="button" style="float: left;" class="btnh btn-primary" id="annulerImage">Annuler</button>
                      </h4>
                      <h3>
                        <button type="button" style="float: left;" class="btnh btn-primary" id="supprimerImage">Pas d'image</button>
                      </h3>
                      <h2>
                        <button type="submit" style="float: right;" class="btnh btn-primary" id="goImage" value="Upload">Enregistrer</button>
                      </h2>
                    </div>
                  </div> 
                </div>
              </div>
          </form>


    Rien dans dico.js

    route.js
    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
    const express = require('express');
    const path = require('path');
    var formidable = require('formidable');  
    var fs = require('fs');
    //var fse = require('fs-extra');  
    var app = express();
     
    var routeprincipale = express.Router();
     
    routeprincipale.post('/image', (req, res, next) => {
        var form = new formidable.IncomingForm();  
        form.parse(req);
        form.uploadDir = '/public/Dicos/img';
        form.on('fileBegin', function (name, file) {
            console.log(__dirname + '/public/Dicos/img/' + file.name);
            file.path = __dirname + '/public/Dicos/img/' + file.name;    
        });  
        form.on('file', function (name, file) {
            console.log('Uploaded ' + file.name);
        });
        return res.send("Ok");
    });


    Et ça fonctionne

    Merci le café