Erreur lors de l'envoi d'une image au serveur

**L'aigle de Carthage** · 26/04/2018, 18h25

Bonsoir,

J'ai le code JS suivant pour envoyer une image à partie de mon emulateur/téléphone vers un serveur (en fait il va interagir avec un script php hébergé dans mon localhost):

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
document.querySelector('#afile').addEventListener('change', function(e) {
  var file = this.files[0];
  var fd = new FormData();
  fd.append("afile", file);
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://192.XXX.XXX.X/myproject/saveme.php', true);
 
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };
  xhr.onload = function() {
   console.log("YES!!!");
   console.log(this.status+ " // " +this.response);
    if (this.status == 200) {
 
      var resp = JSON.parse(this.response);
      console.log('Server got:', resp);
      var image = document.createElement('img');
      image.src = resp.dataUrl;
      document.body.appendChild(image);
    };
  };
  xhr.send(fd);
}, false);

voici le code HTML correspondant:

Code html :

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

1
2
3
4
5
6
 <input type="file" accept="image/*;capture=camera" id="afile" >
  </label>
		<p>Photo:</p>
		<canvas id="capturedPhoto" width="250" height="250">
 
</canvas>

Le problème lorsque j'exécute le code, je reçois l'affichage suivant:

file:///index.html (45) :80.09612687924704% uploaded
92.74288375491763% uploaded
100% uploaded
YES!!!
file:///index.html (1) :Uncaught SyntaxError: Unexpected token $ in JSON at position 0
file:///index.html (45) :100% uploaded
file:///index.html (49) :YES!!!
file:///index.html (1) :Uncaught SyntaxError: Unexpected token $ in JSON at position 0

La position 0 correspond à la ligne suivante:

<!DOCTYPE html>

Je me demande c'est quoi le problème?

Merci pour votre aide en avance!

**Watilin** · 30/04/2018, 01h45

Bonsoir !

Envoyé par L'aigle de Carthage

La position 0 correspond à la ligne suivante:

<!DOCTYPE html>

En fait non, ce message fait référence à la position 0 du JSON renvoyé par ton serveur. Visiblement la réponse commence par un $ et le parseur JSON le rejette.

Je pense que l’origine du problème est ici :

Code :

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

xhr.open('POST', 'http://192.XXX.XXX.X/myproject/saveme.php', true);

file:///index.html (1) :Uncaught SyntaxError: Unexpected token $ in JSON at position 0

Tu appelles une page PHP mais ton protocole est file:, autrement dit, tu ne passes pas par un serveur, tu accèdes à tes fichiers en local via le système de fichiers. Or, sans serveur, pas de moteur PHP, les fichiers .php sont donc considérés comme des fichiers de texte brut. C’est le code source de ton fichier qui est envoyé à la place du JSON.

Utilise un serveur local (WAMP/LAMP, EasyPHP, etc.), accède à ta page via http: ou https:, et ça devrait marcher

**L'aigle de Carthage** · 30/04/2018, 12h01

Bonjour Watilin,

Tout d'abord, merci pour votre réponse.

En fait, mon fichier php se trouve dans un serveur local (WAMP), et l'adresse ip masqué, c'est l'adresse que j'accède à partir d'un émulateur.

J'ai modifié mon code en utilisant le protocole https, et j'ai eu cette réponse

file:///index.html (50) :400 //

à cette instruction

Code :

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

console.log(this.status+ " // " +this.response);

**Watilin** · 30/04/2018, 14h08

D’après ta console tu es toujours en file:.

Mais tu as également un code 400 qui signifie Bad Request. ~~Étant donné que c’est toi qui as fait le script serveur (si j’ai bien suivi), tu dois avoir une idée de ce que ça veut dire, non ?~~

Edit: je viens de comprendre ce que tu as voulu dire :

J'ai modifié mon code en utilisant le protocole https

Tu veux dire que tu as changé l’URL de la requête ajax, c’est bien ça ?

Ça ne marche pas comme ça. Normalement, un navigateur n’accepte pas de faire des requêtes ajax depuis un fichier accédé en protocole file: vers une URL d’un autre protocole, ça fait partie de la Same Origin Policy. Ce que je te suggérais de faire, c’est d’accéder à ton index.html via http:, c’est-à-dire avec une URL dans la barre d’adresse qui commence par http:.

Et je crois que le code 400 signifie en fait simplement que ton serveur ne sait pas gérer le https:. Avec WAMP, ça ne marche pas tout seul, il faut installer un certificat et activer je ne sais plus quel(s) module(s).

**L'aigle de Carthage** · 30/04/2018, 15h46

En fait, j'ai fait une erreur de ***** (je ne trouve pas les bons termes)!!!!

J'ai oublié de mettre les <?php et ?> dans mon script php (que j'ai trouvé via un tuto sur internet)

Mais quand j'ai exécuté mon code cette fois, j'ai eu:

file:///index.html (45) :85.41052728415694% uploaded
100% uploaded
YES!!!
200 // <br />
file:///index.html (1) :Uncaught SyntaxError: Unexpected token < in JSON at position 0
file:///index.html (45) :100% uploaded
file:///index.html (49) :YES!!!
file:///index.html (50) :200 // <br />
file:///index.html (1) :Uncaught SyntaxError: Unexpected token < in JSON at position 0

et j'ai ajouté ce header dans mon fichier php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');

**Watilin** · 30/04/2018, 17h29

Tu es toujours en file:

Ouvre la console de ton navigateur (touche F12), va sur l’onglet réseau / networking, et ensuite interagis avec ton input pour déclencher la requête ajax. Tu verras la requête apparaître dans la console. En cliquant dessus tu pourras l’examiner et voir le contenu qui est envoyé par le serveur, ainsi que les en-têtes, le protocole, etc. Ça devrait t’aider à mieux comprendre ce qui se passe.

Erreur lors de l'envoi d'une image au serveur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager