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.

**L'aigle de Carthage** · 10/05/2018, 12h23

Bonjour,

Je me suis parvenu à envoyer mon fichier (sous format image64) vers mon script php (situé dans mon serveur local)!

Le script php intercepte l'image (sous format image64) et il est censé la reconvertir en une vrai image lisible!

Le problème ici c'est que mon image est générée, sauf qu'elle est NOIR

Le contenu de l'image (sous format image64 qui est une LONGUE chaine de caractère) se trouve dans le fichier suivant (il suffit de cliquer sur SlowDownload pour le télécharger

):

https://upload.cat/5d2352ad15552381

J'ai essayé de re-convertir l'image64 en une image en utilisant quelque sites dédiés sur internet... mais j'ai rien reçu!

Je me demande si le problème vient du format du contenu image64?

**Watilin** · 10/05/2018, 18h54

Tu peux recréer le fichier image avec fopen en mode binaire (fopen('wb', ...) ou fopen('xb', ...)) et en y écrivant (fwrite) la chaîne décodée avec base64_decode.

**bonjourajax** · 17/05/2018, 00h40

Bonsoir
Tu peux envoyer l'image en ajax sans l'encoder en base64 et utiliser la fonction imagejpeg() en php ( l'envoi plus la transformation peut durer plusieurs minutes) mais le rendu est niquel

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

JavaScript

Discussions similaires

Partager

Partager