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.