Récuperer le vrai path d'un input file en js

Version imprimable

14/08/2012, 18h47
jchevalay54

Récuperer le vrai path d'un input file en js
Bonsoir,

Je fais actuellement un petit script js qui a pour fonction de me retourner le véritable chemin d'un fichier qui a était sélectionner au préalable sélectionné par un utilisateur grâce à un input type files.

pour le moment je recupere un chemin :
Code:

1 2 C:\fakepath\.......
cela n'est pas le bon.

quelqu'un aurais la solution.
14/08/2012, 23h26
Auteur

bonsoir,

On ne peut pas récupérer le contenu de l'input file. Que veux-tu faire ?
15/08/2012, 11h46
jchevalay54

par exemple l'utilisateur veut uploader une images mais j’aimerais lui afficher dans div en miniature mais sans poster le formulaire. Donc il l'a sélectionne et hop il la voie en miniature quand il post le formulaire la ça la upload sur mon serveur.
15/08/2012, 12h03
laurentg2003

En HTML5 et avec l'extension javaScript c'est possible
vas sur ce lien
http://www.html5rocks.com/en/tutorials/file/dndfiles/
et regarde l'exemple de code :Reading files
ça fonctionne sous firefox pour les autres testes :)

C'est une bonne piste =) merci je vais regarder cela

Ok cela fonctionne bien mais maintenant j'aimerais le faire avec des video au format avi.

Code:

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
 
<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>
 
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
 
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
 
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
 
      // Only process image files.
      if (!f.type.match('video/avi.*')) {
        continue;
      }
 
      var reader = new FileReader();
 
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<video class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);
 
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

donc logiquement cela devrai fonctionner mais ça plante.
une idée ?

15/08/2012, 14h37
Auteur

@laurentg2003 : si j'ai bien compris la documentation l'API FileReader utilise Ajax ?
En lisant le tutoriel j'ai eu la surprise de découvrir la balise <output> 8O. Je n'ai trouvé aucune documentation à son sujet, est-ce que tu en sais un peu plus ?
15/08/2012, 16h21
thelvin

Citation:

Envoyé par jchevalay54

donc logiquement cela devrai fonctionner mais ça plante.
une idée ?

Disons que readAsDataUrl(), sur une image, passe encore. De nos jours une image c'est pas grand-chose. Mais sur une vidéo, si elle est un peu costaude, ça me semble très ambitieux. Rien que la charger entièrement en mémoire ce n'est pas rien. Mais encodée en data: URL et redécorée juste après, c'est de la folie. Même si on peut imaginer des vidéos avec lesquelles ça devrait passer, il y a de fortes chances que les navigateurs n'aient pas prévu de gérer le data: URL pour les audios et videos.

Je ne pense pas qu'il y ait une technologie dispo dans les navigateurs modernes, pour résoudre le problème. On pourrait imaginer plusieurs choses, la plus simple étant créer une URL interne et temporaire vers chaque fichier sélectionné par l'utilisateur. Mais aucune qui n'existe à ma connaissance.

Citation:

Envoyé par Auteur

@laurentg2003 : si j'ai bien compris la documentation l'API FileReader utilise Ajax ?

Tout dépend de ce que tu appelles Ajax. Elle utilise du JavaScript asynchrone, oui, mais pas une once de XML, JSON, ou HTML en réponse.

Citation:

Envoyé par Auteur

En lisant le tutoriel j'ai eu la surprise de découvrir la balise <output> 8O. Je n'ai trouvé aucune documentation à son sujet, est-ce que tu en sais un peu plus ?

<output> est un élément HTML5.
On peut considérer que l'exemple l'utilise bien, puisqu'il est vide au départ et a vocation à être rempli, son contenu étant créé en réponse à une action utilisateur.
15/08/2012, 17h43
Invité

pour avoir deja fait des testes il est tout a fait possible d'utiliser readAsDataUrl() pour visionner une video et de l'audio et le chargement par le navigateur du fait que se soit en local est rapide
15/08/2012, 20h58
laurentg2003

C'est que ça doit marcher alors :)
Pour moi c'est pas de l'ajax ...
Sinon niveau sécurité je suis curieux de voir ce que ça peut donner
Ensuite,je suis convaincu qu'en "bidouillant" le DOM il y a moyen de récupérer ce fameux PATH
16/08/2012, 10h30
jchevalay54

Citation:

Envoyé par mekal

pour avoir deja fait des testes il est tout a fait possible d'utiliser readAsDataUrl() pour visionner une video et de l'audio et le chargement par le navigateur du fait que se soit en local est rapide

Pourrais-tu grâce au script que j'ai poster me dire ou est mon erreur je ne la trouve pas.
16/08/2012, 11h26
laurentg2003

En Ayant rapidement survoler filesystem.api
Je pense que l'api qui gére l'image et l'audio et la video ne sont pas les mêmes
Regarde là => http://www.webtest.netau.net/docWork...I.Jul.2011.pdf
Pour etre franc depuis hier ,je suis plongé dans les Api HTML5 JavaScript
Je monte dans le train avec un peu de retard mais c'est totalement révolutionnaire
Les applications HTML5 donnent un coup de vieux aux apps classiques
C'est vraiment remplacer un plug in comme java :ccool:
Je suis sous le choc :mouarf:
16/08/2012, 12h07
thelvin

Citation:

Envoyé par laurentg2003

C'est que ça doit marcher alors :)

Après faut voir la taille de la vidéo.

Citation:

Envoyé par laurentg2003

Pour moi c'est pas de l'ajax ...

Question de définition. Ça fait bien longtemps que Ajax ne veut plus rien dire, à la base.

Citation:

Envoyé par laurentg2003

Sinon niveau sécurité je suis curieux de voir ce que ça peut donner

Pas grand-chose. L'utilisateur a clairement sélectionné ce fichier pour être envoyé au site, qui pourra donc en faire ce qu'il veut. S'il le fait faire par le navigateur plutôt que par le serveur, je vois pas ce que ça change.
Il y a moyen de facilement planter le thread JavaScript ou de surcharger la mémoire, mais ces choses sont censées être déjà largement gérées par les navigateurs.

Citation:

Envoyé par laurentg2003

Ensuite,je suis convaincu qu'en "bidouillant" le DOM il y a moyen de récupérer ce fameux PATH

Bah les navigateurs qui mettent fakepath le font exprès, par soucis de sécurité. À moins d'une faille quelque part, il n'y a aucune chance qu'ils changent d'avis en cours de route.

Citation:

Envoyé par jchevalay54

Pourrais-tu grâce au script que j'ai poster me dire ou est mon erreur je ne la trouve pas.

S'il le pouvait il l'aurait fait. C'est pas parce que ça a marché sur son navigateur avec sa vidéo qu'on peut généraliser. Déjà il peut y avoir des problèmes avec la taille de la vidéo et avec ses conteneur et codecs.

- Chez moi, aucune video n'est annoncée de type "video/avi.*". Un fichier avi est annoncé comme video/x-msvideo. C'est décidé juste en fonction de l'extension, pas de son vrai type. Il serait plus logique de ne filtrer que sur "video/.*"

- À part ça, ça marche. Mais concaténer e.target.result à d'autres strings me semble rajouter une couche d'abus sur quelque chose qui est déjà abusé.
Je suggère plutôt de faire un truc genre :

Code:

document.getElementById('thumbvideo').src = e.target.result;

Ça évitera de dupliquer plusieurs fois la vidéo sous forme de string, au moins.

voila un script fonctionnel qui permet de previsualisé image video et audio il n'est pas parfait

pour previsualisé une video ou ecouter un son il faut cliquer sur la vignette et il faudra faire attention au format audio et video utilisé car il diferre entre chaque navigateurs par exemple ie ne lis pas un fichier ogg ou firefox qui ne lis pas un fichier mp3

Code:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
 
.box{
position:absolute;
background-color:gray;
height:200px;width:250px;
margin-top:120px;
margin-left:600px;
border:1px ridge #aaa;
-moz-box-shadow: 10px 10px 10px #212121;
-webkit-box-shadow: 10px 10px 10px #212121;
box-shadow: 10px 10px 10px #616161;
}
 
.tables td img, video{
width:8em;
}
 
.tables {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 50%;
	text-align: left;
}
.tables thead tr th, table.tablesorter tfoot tr th {
 
	border: 1px solid #FFF;
 
}
 
.tables tbody tr {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
</style>
 
<script type="text/javascript">
 
var compteur=0
 
function dragenter(e) {
	e.stopPropagation();
	e.preventDefault();
}
 
 
function drop(e) {
 
	if (!e) {
		var fichier = document.getElementById('fileinput').files;
	}
	else {
		var fichier = e.dataTransfer.files;
	}
	chacharge(fichier);
}
 
 
function chacharge(fichier) {
 
	if (fichier[compteur].type.match('image.*') || fichier[compteur].type.match('audio.*')|| fichier[compteur].type.match('video.*')) {
 
		var tbrow=document.getElementById("tabs").insertRow(-1);
 
		tbrow.insertCell(0);
		tbrow.cells[0].appendChild(document.createTextNode(fichier[compteur].name));
 
		tbrow.insertCell(1);
 
		if (fichier[compteur].type.match('image.*')) {
			var construction=document.createElement('img');
			var elmage= tbrow.cells[1].appendChild(construction);
		}
 
		else if (fichier[compteur].type.match('audio.*')) {
 
			var construction=document.createElement('audio');
			var elmage= tbrow.cells[1].appendChild(construction);
 
			construction=document.createElement('span');
			var txt=document.createTextNode('cliquez ici');
			construction.appendChild(txt);
			construction.setAttribute('onclick','playpause(this.previousSibling)');
			tbrow.cells[1].appendChild(construction);
 
		}
 
		else if (fichier[compteur].type.match('video.*')) {
			var construction=document.createElement('video');
			construction.setAttribute('onclick','playpause(this)');
 
			var elmage= tbrow.cells[1].appendChild(construction);
		}
 
		var charge=new FileReader();
		charge.readAsDataURL(fichier[compteur]);
		charge.onloadend = function(e){
 
			elmage.src = e.target.result;
			if (compteur<fichier.length-1) {
				compteur++;
				chacharge(fichier);
			}
			else{
				compteur=0;
			}
		}
	}
 
	else{
 
		if (compteur<fichier.length-1) {
			compteur++;
			chacharge(fichier);
		}
		else{
			compteur=0;
		}
	}
 
}
 
 
function playpause(lui){
 
	if(lui.paused==true){
		lui.play();
	}
	else{
		lui.pause();
	}
}
 
</script>
</head>
<body>
<div id='dropbox' class='box' ondragenter="this.textContent = ''; dragenter(event)" ondragover="dragenter(event)" ondrop="dragenter(event); drop(event);"></div>
<br>
<br>
 <input type='file' id='fileinput' multiple='multiple' onchange='drop()'>
 <br>
 
<table class="tables" ondragenter="dragenter(event)" ondragover="dragenter(event)" ondrop="dragenter(event); drop(event);">
<thead>
<tr>
	<th>nom</th>
	<th>visu</th>
	</tr>
</thead>
	<tbody id="tabs">
	</tbody>
</table>
 
</body>
</html>

17/08/2012, 20h53
owenho

Bonjour à tous,
déja fakepath il assure un peu de sécurité...
on peut récupérer le chemin complet du fichier en utilisant internet explorer. mais c'est pas faisable avec chrome et Firefox;
cherche dans google comment éviter les chemin de type fakepath.