Envoi de variable JS vers PHP

**GalaxyNovaFR** · 06/06/2022, 14h12

Bonjour !

Je suis un jeune novice en développement web. J'ai fait des recherches sur Internet mais j'ai un peu de mal avec l'AJAX et l'envoi d'une variable vers le PHP alors je m'explique.

J'ai crée une page web sur laquelle nous pouvons uploader des fichiers avec des input file crée dynamiquement et également ajouter du texte avec des textarea crée dynamiquement aussi. Mon but est que lorsque l'on soumet le formulaire. Le php va traiter ces fichiers et les ajouter dans une base de donnée en fonction de l'ordre dans lequel les inputs ont été crée. Problème : lorsque je crée un input file ou un textarea c'est à ce moment-là que l'ordre des fichiers va être défini. En effet, la variable order va être incrémenté de 1 à chaque fois que j'appelle la fonction de création d'input. Je veux pouvoir récupérer cette variable en PHP et pouvoir ajouter l'ordre du fichier. On m'a dit que je devais utiliser l'AJAX mais je suis perdu. Voici le code de mon fichier add_files.php :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<?php
session_start();
 
if(isset($_SESSION["user"]["username"])){
    require('../../Config.php');
    $resourceType = $_GET["type"];
    $resourceName = $_GET["name"];
    $idResource = $_GET["id"];
    if(isset($_POST['submit']))
    {
        if(isset($_FILES['file'])||isset($_POST['text'])){
            $order = $_POST['order'];
            foreach($_FILES['file']['tmp_name'] as $key => $tmp_name ){;
                $file_name = $_FILES['file']['name'][$key];
                $file_size = $_FILES['file']['size'][$key];
                $file_tmp = $_FILES['file']['tmp_name'][$key];
                $file_type = $_FILES['file']['type'][$key];
                $orderFile = $key + $orderText;
                $allowedImage = [
                    "jpg" => "image/jpeg",
                    "jpeg" => "image/jpeg",
                    "png" => "image/png"
                ];
                
                $allowedVideo = [
                    "mp4" => "video/mp4"
                ];
                
                $extension = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
                if(array_key_exists($extension, $allowedImage) || in_array($file_type, $allowedImage)){
                    echo 'image'.$key.' : '.$order;
                    if($file_size < 8 * 1024 * 1024){
                        $sql=$conn->prepare("SELECT nomDuFichier FROM image WHERE nomDuFichier = '$file_name'");
                        $sql->execute();
                        $fileNameAlreadyExist=$sql->fetch();
                        if($fileNameAlreadyExist)
                        {
                            $file_name=explode('.',$file_name);
                            $file_name=$file_name[0].$idResource.'.'.$file_name[1];
                        }
                        $pathFile = __DIR__."/../../imagesRessource/$file_name";
                        if(!move_uploaded_file($file_tmp,$pathFile)){
                            $msgError3 = "Le fichier n'a pas été uploadé ";
                        }
 
                        //include('resize_picture.php');/*resize image 1280*720 */
                        
                        $query="INSERT INTO image (nomDuFichier,ordre,id_ressource) 
                        VALUES ('$file_name',$orderFile,$idResource)";
                        $insert = $conn->prepare($query);
                        $insert->execute();
                    }else{
                        echo "Fichier trop volumineux";
                    }
                }else{
                    echo "Format de fichier invalide";
                }
                if(array_key_exists($extension, $allowedVideo) || in_array($file_type, $allowedVideo)){
                    echo 'video'.$key.' : '.$order;
                    if($file_size < 1 * 1024 * 1024 * 1024){
                        $sql=$conn->prepare("SELECT nomDuFichier FROM video WHERE nomDuFichier = '$file_name'");
                        $sql->execute();
                        $fileNameAlreadyExist=$sql->fetch();
                        if($fileNameAlreadyExist)
                        {
                            $file_name=explode('.',$file_name);
                            $file_name=$file_name[0].$idResource.'.'.$file_name[1];
                        }
                        $pathFile = __DIR__."/../../videosRessource/$file_name";
                        if(!move_uploaded_file($file_tmp,$pathFile)){
                            $msgError3 = "Le fichier n'a pas été uploadé ";
                        }
                        $query="INSERT INTO video (nomDuFichier,ordre,id_ressource) 
                        VALUES ('$file_name',$orderFile,$idResource)";
                        $insert = $conn->prepare($query);
                        $insert->execute();
                    }else{
                        echo "Fichier trop volumineux";
                    }
                }else{
                    echo "Format de fichier invalide";
                }
            }
            if(isset($_POST['text'])){
                foreach($_POST['text'] as $key => $text){
                    echo 'texte'.$key.' : '.$order;
                    $order = $_POST['order'];
                    var_dump($order);
                    var_dump($text);
                    var_dump($order);
                    $orderText = $orderFile + 1;
                    echo $orderText;
                    if(strlen($text)<=10){
                        $query="INSERT INTO texte (contenuDuTexte,ordre,id_ressource) 
                        VALUES ('$text',$orderText,$idResource)";
                        $insert = $conn->prepare($query);
                        $insert->execute();
                    }else{
                        echo "Le texte est trop long !";
                    }
                }
            }
 
        }
        header('Location: resource.php');
    }
 
    if(isset($_POST['cancel'])){
        $deleteResource=$conn->prepare("DELETE FROM ressource WHERE id = ?");
        $deleteResource->execute(array($idResource));
        header('Location: resource.php');
    }
 
    ?>
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <script src="jquery.min.js"></script>
        <title>Ressources</title>  
      <link rel="stylesheet" href="../../css/nav.css"/>
      <ul class = ul2>
        <a href="../../index.php"><img src="../../imagesSite/hutchinson_logo.png" alt="Hutchinson"  width="200px" height="34px"></a>
            <li class = il2 >Bienvenue <?php if(!empty($_SESSION['user'])){echo $_SESSION['user']['username'];} ?></li>
            <a href="../../logout.php" style="text-decoration:none; color:#FF0000;">Déconnexion</a>
        </ul>
    </head>
    <body>
        <h1>Ajouter des fichiers pour la ressource : <?=$resourceName?></h1>
        <form class="form" method="post" enctype = "multipart/form-data">
        <input type="submit" name="submit" value="Créer la ressource">
        <input type="submit" name="cancel" value="Annuler">
        <br><br>
        <div id="button">
        </div>
        <div style="display:flex; justify-content:flex-start;">
            <input type="button" class="addfile" name="addfile" value="Ajouter fichier" onclick="addInput()"><br><br>
            <input type="button" class="addtext" name="addtext" value="Ajouter texte" onclick="addText()">
        </div>
        <br><br>
        </form>
        <script type="text/javascript">
            var order = 0;
            function sendOrder(){            
                $(document).ready(function() {
                    $.ajax({
                        type: "POST",
                        url: 'add_files.php',
                        data: 'order=' + order,
                        success: function(order)
                        {
                            alert(order);
                        }
                    });
                });
            }
 
            function addInput(){
                order++;
                console.log(order);
                var newLabel = document.createElement('label');
                newLabel.setAttribute = ('for', 'file');
                document.getElementById('button').appendChild(newLabel);
                var newLabelText = document.createTextNode("Fichier : jpg, jpeg, png, mp4 ");
                newLabel.appendChild(newLabelText);
 
                //Creation de l'input
                var newInputFile = document.createElement('input');
                newInputFile.type = 'file';
                newInputFile.name = 'file[]';
                document.getElementById('button').appendChild(newInputFile);
 
                //Creation des sauts de ligne
                var newBr = document.createElement('br');
                document.getElementById('button').appendChild(newBr);
 
                var newBr = document.createElement('br');
                document.getElementById('button').appendChild(newBr);
 
                sendOrder();
 
            }
            function addText(){
                order++;
                console.log(order);
                var newLabel = document.createElement('label');
                newLabel.setAttribute = ('for', 'text');
                document.getElementById('button').appendChild(newLabel);
                var newLabelText = document.createTextNode("Ajouter un texte ");
                newLabel.appendChild(newLabelText);
 
                var newTextarea = document.createElement('textarea');
                newTextarea.name = 'text[]';
                newTextarea.cols = '180';
                newTextarea.rows = '10';
                document.getElementById('button').appendChild(newTextarea);
 
                sendOrder();
            }
        </script>
    </body>
</html>
<?php
}else{
    echo "Vous n'avez pas accès à cette page";
    ?>
    <br><br>
    <a href="../../index.php"style="text-decoration:none; color:#FF0000;">Retourner à la page d'accueil</a>
    <?php
}
?>

Merci d'avoir pris le temps de me lire. J'espère que j'ai été assez clair.

**mathieu** · 06/06/2022, 16h16

ajax est seulement utile si vous voulez faire l'envoi du formulaire en javascript pour ensuite faire quelque chose en javascript.
si vous n'en avez pas besoin, vous pouvez très bien envoyer le formulaire de manière classique avec un bouton "input type=submit".

**GalaxyNovaFR** · 06/06/2022, 17h26

Donc comment dois-je faire pour pouvoir justement récupérer l'ordre d'upload de chaque fichier en php ?

Envoi de variable JS vers PHP

AJAX

Discussions similaires

Partager

Partager