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