Création d'une map interactive en Ajax, Json, Php, JQuery

HardWork -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention - 2 juin 2015 à 15:56

Bonjour,

J'essaie de créer une map avec gmaps.js. Mon but est de créer une map où l'on peut créer un marqueur sur la carte en cliquant et en le plaçant sur la carte. Les utilisateurs remplissent plusieurs champs, dont un champ image.

Mon soucis est la vérification du champ image, pour vérifier si l'extension est un png ou un jpg et si l'image n'est pas au bon format ne pas ajouter un marqueur.

Voilà les 2 codes en question :

INDEX.PHP

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <div id="map"></div>
    <div class="menu">
        <a class="btn blue add create">Ajouter un marker</a>
        <a class="btn pink end">Enregistrer</a>
        <div>
            <input type="text" id="titre" placeholder="Titre de l'emplacement" />
            <textarea id="infos" placeholder="Saisissez vos informations complémentaires"></textarea>
            <input type="file" id="picture" name="picture" multiple accept=".png,.jpg,.jpeg" />
            <span class="upload-error"></span>
        </div>
    </div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="gmaps.js"></script>
    <script type="text/javascript">
  var creer = false;
        var confirmer = true;
        var marker = -1;
        var error = false;
  var errorOnUpload = 0;

  function uploadError(result){
   if (result == true) {
     errorOnUpload = errorOnUpload + 1;
   }
  }
  
        $(document).ready(function() {

            map = new GMaps({
                div: '#map',
                lat: -12.043333,
                lng: -77.028333
            });

            $.getJSON("json.php", function(getData) {
                $.each(getData, function(i, existing) {
                    marker = marker + 1;
                    map.addMarker({
                        lat: existing.latitude,
                        lng: existing.longitude,
                        title: 'Marker #' + marker,
                        infoWindow: {
                            content: ""
                        }
                    });
                });
                marker = marker + 1;
            });

            GMaps.on('click', map.map, function(event) {
                var index = map.markers.length;
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();

                if (creer && confirmer == false) {
                    map.addMarker({
                        lat: lat,
                        lng: lng,
                        title: 'Marker #' + marker,
                        draggable: true,
                        infoWindow: {
                            content: "" + lat
                        }
                    });

                    creer = false;
                }
            });

            $(".btn").on("click", function() {
                if ($(this).hasClass("disabled")) {
                    return false;
                }
            });

            $(".add").on("click", function() {
                $(this).addClass("disabled");
                if ($(this).hasClass("create")) {
                    creer = true;
                }
                $(this).removeClass("create");
                confirmer = false;
                $(".end").show();
            });

            $(".end").on("click", function() {
                $(this).hide();
                $(".add").addClass("create");
                confirmer = true;
                $(".add").removeClass("disabled");
                if (confirmer && creer == false) {
                    map.markers[marker].setDraggable(false);

                    var titre = $('#titre').val();
                    var infos = $('#infos').val();

                    // Recup lat-long
                    var position = map.markers[marker].getPosition();

                    var finalLat = position.lat();
                    var finalLon = position.lng();

                    var files = document.getElementById("picture").files;
                    for (i = 0; i < files.length; i++) {
                        var file_data = $('#picture').prop('files')[i];
                        var form_data = new FormData();
                        form_data.append('file', file_data);
                        $.ajax({
                            url: 'upload.php?method=upload', // point to server-side PHP script 
                            dataType: 'json', // what to expect back from the PHP script, if anything
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: form_data,
                            type: 'post',
                            success: function (uploadResponse){
        uploadError(uploadResponse.error);
       }
                        });
                    }
     
                    if (errorOnUpload == 0) {

                        $.post("upload.php?method=addMarker", {
                                latitude: finalLat,
                                longitude: finalLon,
                                nom: titre,
                                informations: infos
                            })
                            .done(function(data) {
                                console.log(data);
                            });
                        marker = marker + 1;
                    }
     else if(errorOnUpload >= 0){
       alert("ERREUR");
     }
                }
            });
        });
    </script>
</body>

</html>

UPLOAD.PHP

<?php

require_once("connect.php");

?>

<?php

$method = $_GET["method"];

if($method == "upload"){
          // Mon code d'upload

          if ( 0 < $_FILES['file']['error'] ) {
             //echo 'Error: ' . $_FILES['file']['error'] . '<br>';
          }
          else {
                    $allowed =  array('jpeg','png','jpg');
                    $filename = $_FILES['file']['name'];
                    $ext = pathinfo($filename, PATHINFO_EXTENSION);
                    if(!in_array($ext,$allowed) ) {
                        $errorMsg = "Le format du fichier ".$filename." n'est pas autorisé";
                        
                        $jsonArray = array ("image"  => $filename, "errorMsg" => $errorMsg, "error" => true);                     
                        print json_encode($jsonArray);
                        
                    }
                    else{
                              $errorMsg = "Le fichier ".$filename." a bien été publié";
                              $jsonArray = array ("image"  => $filename, "errorMsg" => $errorMsg, "error" => false);                     
                              print json_encode($jsonArray);
                             
                    }
              
          }
          
}

if($method == "addMarker"){
          // Mon code d'ajout du marker
          
          // Récupération variables
          $latitude = $_POST["latitude"];
          $longitude = $_POST["longitude"];
          $titre = $_POST["nom"];
          $infos = $_POST["informations"];
          
          $sql = "INSERT INTO Marker (`id`, `titre`, `image`, `infos`, `latitude`, `longitude`) VALUES (NULL, '$titre', 'Image', '$infos', '".$latitude."', '".$longitude."');";
          
          mysql_query($sql);
          printf("%d", mysql_insert_id());
          
}

?>

Le problème c'est que même si l'image n'est pas au bon format, le marqueur est enregistré.

Voilà, je sais pas si c'est très compréhensible.

Je vous remercie d'avance pour toutes suggestions.

Afficher la suite

A voir également:

Création d'une map interactive en Ajax, Json, Php, JQuery
Google map satellite gratuit - Guide
Creation compte gmail - Guide
Création site web - Guide
Media creation tool - Télécharger - Systèmes d'exploitation
Création compte google - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Salut,

Si le marqueur est enregistré alors que le format de l'image n'est pas bon, cela vient de la condition

if (errorOnUpload == 0)

qui est fausse. La variable errorOnUpload est modifié dans la fonction uploadError() qui est elle même appelée dans le retour de ta première requête ajax

uploadError(uploadResponse.error);

.
En utilisant la console de développement de ton navigateur (raccourci F12), tu peux analyser la requête ajax via l'onglet Réseau (ou Network sous Chrome). Vérifie alors que le retour de la requête correspond bien à la valeur attendue (c-a-d uploadResponse.error = true) si le format d'image n'est pas autorisé.

Une autre solution serait de modifier ton traitement pour gérer l'upload du fichier et la création du marqueur en une seule requête ajax. Tu pourrais ainsi gérer la création du marqueur si l'extension de l'image est correcte directement dans ton traitement php sans devoir passer par une deuxième requête ajax.

Bon dév ;)

Votre réponse