Discussion :

[jchevalay54]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
 C:\fakepath\.......

cela n'est pas le bon.

quelqu'un aurais la solution.

[Auteur]

bonsoir,

On ne peut pas r�cup�rer le contenu de l'input file. Que veux-tu faire ?

[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.

[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

[jchevalay54]

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 :

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
 
<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 ?

[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> . Je n'ai trouv� aucune documentation � son sujet, est-ce que tu en sais un peu plus ?

[thelvin]

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.

@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.

En lisant le tutoriel j'ai eu la surprise de d�couvrir la balise <output> . 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.

[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

[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

[jchevalay54]

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.

[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
Je suis sous le choc

[thelvin]

C'est que �a doit marcher alors

Apr�s faut voir la taille de la vid�o.

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.

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.

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.

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

[Invit�]

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 :

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
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>

[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.