Récupérer les valeurs d’un drop envoyé en JavaScript

**Mortimerr** · 15/01/2023, 10h27

Bonjour, je souhaite drop un fichier dans un textarea, puis l'envoyer sur le serveur; j'ai réussi la partie drop avec l'aide de ChatGPT, cependant il doit manquer quelque chose car je n'arrive pas à récupérer les informations du drop sur le fichier upload.php.

Le fichier index.php

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
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>BBCode</title>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.png">
    <link rel="icon" type="image/x-icon" href="./favicon.png" />
</head>
<body>
 
<div id="maDiv"></div>
<br />
 
<textarea id="myTextarea" name="description" style="height:300px;width: 923px;"></textarea>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<script>
var textarea = document.getElementById("myTextarea");
 
textarea.addEventListener("dragover", function(e) {
  e.preventDefault();
});
 
textarea.addEventListener("drop", function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  var formData = new FormData();
  formData.append("file", file);
  fetch("upload.php", {
    method: "POST",
    body: formData
  });
 
  $.post("upload.php" ,{ url:$(this).val() } ,function(data){
    var maDiv = document.getElementById("maDiv");
    maDiv.innerHTML = data;
  });
 
});
 
</script>
 
</body>
</html>

Le fichier upload.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
  $currentLocation = $_FILES['file']['tmp_name'];
  $newLocation = 'upload/' . $_FILES['file']['name'];
 
  echo ('Nom du fichier : '.$_FILES['file']['name'].'<br />');
 
  if (move_uploaded_file($currentLocation, $newLocation)) {
    echo ('Le fichier a été déplacé avec succès.');
  } else {
    echo ('Il y a eu une erreur lors du déplacement du fichier.');
  }
 
?>

Merci pour votre aide.

**mathieu** · 15/01/2023, 10h58

pourquoi utilisez vous un champ textarea ? ça serait plus simple avec un champ "input file".
et si vous n'utilisez pas jquery de base dans votre application, je vous conseille d'essayer de faire sans. vous pouvez par exemple envoyer une requete http avec fetch :
https://developer.mozilla.org/fr/docs/Web/API/Fetch_API

**Mortimerr** · 15/01/2023, 11h41

Le textarea pour la raison que l’utilisateur saisit une description dans le textarea et peut, s’il le souhaite, y mettre une image, juste en la glissant dans le textarea. Cette image est transmise en POST en JavaScript au fichier upload.php , cependant je n’arrive pas à récupérer de valeur dans le fichier upload.php . Du coup quand j’upload un fichier, j’ai l’erreur qui s’affiche.

**mathieu** · 16/01/2023, 00h27

je viens de voir que vous faites 2 requetes à upload.php et la 1re avec "fetch" transmet bien le fichier.

vous pouvez voir la réponse de la requete en faisant ça :

Code :

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

1
2
3
4
fetch("upload.php", {...})
.then(reponse => reponse.text())
.then(texte => console.log(texte))
;

**melka one** · 17/01/2023, 10h39

bonjour

ce que tu est en train de dire c'est j'ai utiliser chatgpt pour creer le code mais il manque des choses en gros tu dit j'ai rien fait c'est chatgpt qui a tout fait et tu demande de completer les manques de chatgpt ?

Récupérer les valeurs d’un drop envoyé en JavaScript

JavaScript

Discussions similaires

Partager

Partager