Discussion :

[Pecose]

Bonjour tout le monde,

J'ai un formulaire avec un input=file qui est sensé envoyer une image du client au serveur.
Je pensai enregistrer l'image dans un dossier image, et l'adresse de l'image en base de donnée.

J'ai tester l'affaire, en récupérant côté serveur ce que le client envoie pour le mettre telle quelle en base de donnée.
Ce qui est enregistrer au final, c'est l'adresse de l'image chez le client (ce qui ne m’intéresse pas du tout).

Donc je pense qu'il y a déjà un problème côté client.
Ma question est: comment fait t'on pour mettre une image dans un contenant javascript?
(Exemple: chaîne de caractères)

Merci de votre aide.

[Invité]

Bonjour,

...Je pensai enregistrer l'image dans un dossier image, et l'adresse de l'image en base de donnée...

1- C'est LA bonne idée, en effet.

2- Pour le reste... il faut montrer ton code : formulaire + traitement.


3- Question bonus : POURQUOI le faire via JavaScript ? (et pas "classiquement" en PHP ?)

[Pecose]

Pour le reste... il faut montrer ton code : formulaire + traitement.

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
<form id="article" >
	<div class="container-fluid" >
		<div class="col-xs-12 offset-xs-0 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 jumbotron" >
			<h4 class="text-center" >- Ajoutez un Article -</h4> 
			<hr/>
			<label class="col-3" >Image:</label> 
			<input class="col-8" type="file" id="image" required />
			<hr/>
			<label class="col-3" >Titre:</label> 
			<input class="col-8" type="text" id="title" required />
			<br/><br/>
			<textarea id="text" rows="10" class="col-12" placeholder="Notez ici le contenu de l'article." required />
			<hr/>
			<input class="col-4 offset-4" value="Envoyer" type="submit" />
		</div>
	</div>
</form>

Code :

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

1
2
3
4
5
 
$(document).on('submit', '#article', function() {
	var article = [$('#image').get(0).value, $('#title').get(0).value, $('#text').get(0).value];
	Server.add("articles", "message", article);
});

Mon problème ce trouve dans la variable article.

3- Question bonus : POURQUOI le faire via JavaScript ? (et pas "classiquement" en PHP ?)

Parce que l'image se trouve chez le client.

[Pecose]

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).on('submit', '#article', function() {
	var file = $('#image').file[0];
	if (file.name.match('\.pdf')) {
		var reader = new FileReader();
	  	reader.onloadend = function(e){
	  		$('section').html(e.reader.result);
	  	}
		reader.readAsDataURL(file);
  	}
});

J'ai fait ça mais ça ne marche pas.
"$('section').html" fonctionne mais "e.reader.result" ne retourne rien.

[NoSmoking]

Bonjour,
e.reader.result contient les datas de ton fichier, qui varient suivant le type de fichier lu, les mettre en tant que html pour une image n'a pas de sens, il faut le mettre en tant que qu'attribut src d'une balise <img>.

Une façon de faire

Code :

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

1
2
3
4
5
6
7
8
9
10
function previewImage(file) {
  const input = file.target;
  const reader = new FileReader();
  reader.onload = function() {
    const dataURL = reader.result;
    const output = document.getElementById('output');
    output.src = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
}

Ressource :
↪ L'objet FileReader

[Pecose]

Non c'est pas du tout ce que je veux faire, j'ai fait n'importe quoi.
En fait je veux sérialiser l'image au final.
J'ai encore tester ça:

Code :

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

1
2
3
4
var image = new Image();
image.src = $('#image').get(0).value; 
var base64 = window.atob(image);
$('section').html(image);

Evidemment ça ne marche toujours pas.
Je me demande même si c'est possible.

[NoSmoking]

Je ne vois toujours pas ce que tu essaies de faire, as tu testé le code fourni ?

PS : avant d'utiliser des méthodes, renseigne toi sur ce qu'elles font !

[Pecose]

Je voudrai transformer une image en chaîne de caractères.

[NoSmoking]

Maintenant c'est l’intérêt que je ne vois pas mais bon ...

En repartant du code que je t'ai fourni

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function previewImage(file) {
  const input = file.target;
  const reader = new FileReader();
  reader.onload = function() {
    const dataURL = reader.result;
    const output = document.getElementById('output');
    // récup. de l'image sous forme texte
    const textImage = window.atob(dataURL.split(",")[1]);   
    // affiche l'image
    output.src = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
}

Après chargement la variable dataURL contient quelque chose comme

Code :

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ... et la suite

le fait de « splitter » nous renvoie quelque chose comme

Code :

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

1
2
3
4
const data = [
    "data:image/png;base64",
    "iVBORw0KGgoAAAANSUhEUg ... et la suite"
];

on garde le deuxième élément du tableau et on le converti avec, effectivement, window.atob.

A toi d'en faire ce que tu veux après !

[Loralina]

Bonjour,

Ce qui est enregistrer au final, c'est l'adresse de l'image chez le client (ce qui ne m’intéresse pas du tout).

Si on fait un formulaire comme ceci :

Code html :

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

1
2
3
4
5
<?php var_dump($_GET,$_POST,$_FILES);?>
<form>
<input type="file" name="photo">
<input type="submit">
</form>

Tout ce qu'on aura, c'est le nom du fichier en GET.

Il est impossible de ne pas trouver un exemple fonctionnel d'envoi de fichier sur un moteur de recherche pour un formulaire standard.
Sauf peut-être si on cherche avec comme mots clés "maison, cuisine, film...".
Mais avec "html form file", ça devrait le faire.

De même, si on a besoin d'ajax, Jquery ou autre, la question a été résolue et la solution publiée à maintes reprises.

Ensuite par rapport à la conversion en chaîne de l'image, il serait possible par exemple d'affecter le résultat à un champ caché et de récupérer l'image en POST.
C'est toujours intéressant de tester ça, mais ce n'est généralement pas ainsi qu'on procède, à moins d'un besoin particulier ?

[ABCIWEB]

Toujours pas résolu ?

Comme disait Loralina les scripts complets ne manquent pas. Il y a ce module d'upload par exemple avec de nombreux formulaires prêt à l'emploi et qui dispose de fonctionnalités intégrées avancées : retour d'information en temps réel, surpasse les limites php serveur, reprise d'upload...

Cela ne te prendras que quelques minutes pour le tester si tu utilises php côté serveur car il suffit de poser le dossier sur le serveur pour faire les premiers tests. Côté client c'est du javascript, il y a aussi des exemples pour faire des recadrages d'images avant upload, etc.

[Pecose]

Désolé, je bossais sur autre chose.
Merci de votre aide.