Discussion :

[jpe54]

Bonjour,

Comment obtenir un Event.target.files simplement en cliquant sur un image pour récupérer chemin et nom complet ? Ou récupérer ce chemin en tant qu'objet, équivalent à cet Event.

En fait se passer de l'instruction Input...

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
<input type="file" id="files" name="files[]" />
<output id="list"></output>
 
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files;
 
    var output = [];
 
f = files[0]
      output.push( f.name);
 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
 
 document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Merci

[Bovino]

En fait se passer de l'instruction Input...

Qu'est-ce que tu appelles "l'instruction input" ?

[jpe54]

Bonjour,

En fait disposer d'un Event.target.files ou son objet équivalent en cliquant sur une image... donc sans saisir le chemin de cette image dans un Input...

[Sergejack]

Il faut cliquer sur une image pour préparer l'upload (ou autre) de cette même image ?
Mais d'où vient l'image à la base ?

[jpe54]

Image chargée en piochant dans un tableau de photo contenant chemin et nom complet passés en variable urlimage...

Mais une fois affichée, je souhaite disposer, en fenêtre modale, de différentes informations tant en hors ligne qu'en ligne sur serveur dont les données GPS issus des EXIF présents dans la photo... ceci afin d'éviter d'utiliser une nouvelle base informations à charger depuis un fichier *.js contenant un autre tableau de données.

Je peux y accéder avec le fameux chemin saisi dans Input, mais pas en le récupérant dans urlimage

Voici la fonction de chargement :

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
// ==========================================================================
// Permet de limiter la taille de l'image à la résolution écran si besoin
// ==========================================================================
 
function resize_Child(urlImage, mw, mh, ajustw, ajusth, idConteneur, MyPadding){
 
// mw et mh contiennent largeur hauteur de la fenetre du navigateur affiché
mw = mw - ajustw;
mh = mh - ajusth;
 
var photo = new Image();
//  photo.src = urlImage;
// Pour contrer Bug Cache IE qui ne se recharge pas sur F5
photo.src = urlImage +"?" + new Date().getTime();
 
	photo.onload = function() {
	// Taille originelle de la photo
	var imgW = photo.width;
	var imgH = photo.height;
 
if (imgW > mw || imgH > mh) {
 
	ratioH = mh / imgH;
	ratioW = mw / imgW;
 
		if (ratioH < ratioW || imgH == imgW) {
			imgH = Math.floor((imgH * ratioH) - 30);
			imgW = Math.floor((imgW * ratioH) - 10);
		} else {
			imgH = Math.floor((imgH * ratioW) - 30);
			imgW = Math.floor((imgW * ratioW) - 10);
		}
 
	// Nouvelle Taille proportionnelle en fonction taille écran
	photo.width = imgW
	photo.height= imgH
 
}
 
	// Générer image dans le div choisi
	document.getElementById(idConteneur).appendChild(photo);
	// Construire éléments du cadre une fois image chargée pour éviter flash sous IE 
	document.getElementById(idConteneur).style.padding = MyPadding + "px";
	document.getElementById(idConteneur).style.border = "2px solid #bbb";
	document.getElementById(idConteneur).style.background = "#F4F4F4";
	document.getElementById(idConteneur).style.color = "#777";
	document.getElementById(idConteneur).style.boxShadow = "5px 5px 5px #888";
	}
}

[Watilin]

Dans le code que tu nous montres, urlImage est l'adresse d'une image se trouvant sur le Web. C'est très différent d'une image se trouvant sur la machine de l'utilisateur de ton site.

Il faut savoir que JavaScript n'a pas le droit d'accéder au système de fichiers de l'utilisateur. L'input type file est le seul moyen pour ton site de récupérer des fichiers. Cet input propose une fenêtre de navigation à l'utilisateur pour choisir le fichier à envoyer, et JavaScript n'a aucun contrôle sur cette fenêtre. De plus, si tu tentes de lire la valeur de l'input après que l'utilisateur ait fait son choix, tu auras un faux chemin (typiquement C:\fakepath\image.jpg) pour empêcher toute fuite d'information.

Jusqu'à récemment, la seule chose qu'une page web pouvait faire avec un input type file, c'est envoyer le fichier au serveur. Aujourd'hui avec l'API FileReader, on peut manipuler le fichier côté client.

Après une brève recherche j'ai trouvé quelques librairies JS pour lire les données EXIF :
- une en pur JS : https://github.com/jseidelin/exif-js
- un plugin jQuery : http://plugins.jquery.com/file-exif

[jpe54]

Merci pour cette réponse ! Effectivement le code exemple en pur JS permet bien l'accès aux EXIF en hors ligne mais uniquement si saisie directe du chemin...

Nous sommes donc au même point de blocage, du fait que, comme vous me le rappelez à juste titre, JavaScript n'a pas le droit d'accéder au système de fichiers de l'utilisateur...

Dans ce cas, je n'ai pas d'autre solution que générer (ou charger dynamiquement depuis un tableau) les données souhaitées dans la page html affichée...

Merci à vous tous,

Jean-Paul