Afficher une image d'apres un formulaire utilisant input type="file"

Version imprimable

Voir 40 message(s) de cette discussion en une page

Salut,

En consultant les faqs du site j'ai trouvé ça
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <body> <p> <form method="post" enctype="multipart/form-data" action="uploadfile.php"> <input type="file" name="userfile" size="50"> <br> <input type="submit" value="Envoi"> </form> </p> </body> </html>
Le script fonctionne, mais comment faire pour afficher l'image sélectionné a coté du champ de formulaire afin de montrer a quoi elle ressemble avant envoi ?

12/08/2008, 19h48
D-Ray

Tu veux dire que tu souhaites afficher un aperçu de l'image que l'utilisateur veut envoyer?

--- EDIT ---

Si c'est ça c'est seulement possible dans une navigation hors ligne (du moins avec FF3.0).
En effet, par sécurité, les navigateurs empèchent le chargement d'images depuis le client car ça porte atteinte à la sécurité du site ;) . Sinon, il faudrait télécharger l'image, mais ça serait idiot puisque le but est de montrer un aperçu de l'image au client avant qu'il ne l'uploade...
12/08/2008, 20h27
kilian67

Citation:

Envoyé par D-Ray

Tu veux dire que tu souhaites afficher un aperçu de l'image que l'utilisateur veut envoyer?

Oui D-Ray c'est ça que je voudrai mais comme tu dit je pense pas que ce soit possible et je n'ai rien trouvé a ce sujet pour le confirmer

Salut! ;)

Votre réponse dans ce sujet.

Code:

1
2
  <img name="my_im" src=""/><br/>
  <input type="file" onchange="document.my_im.src=this.value;"/>

13/08/2008, 04h39
bredelet

Le problème, c'est que le navigateur ne sait pas s'il est sûr d'afficher une image quelconque sur ton disque dur. Alors c'est bloqué.
Modif: En fait je dis une bêtise, le problème c'est d'utiliser Javascript pour mettre un lien vers un fichier qui est sur ton disque (donc dans un autre domaine). Ca devrait marcher si tu ajoute l'aperçu sans Javascript, par exemple avec PHP. Pour ça il faut envoyer le chemin de l'image au serveur et recharger la page.

Est-ce que le sélecteur de fichier ne te montre pas déjà un aperçu?
13/08/2008, 08h09
Bovino

Ou l'appeler via Ajax...
13/08/2008, 12h00
Sub0

Je suppose que l'objectif de kilian67 est d'afficher l'image avant de l'uploader.

Citation:

Envoyé par bredelet

[i]Pour ça il faut envoyer le chemin de l'image au serveur et recharger la page.

Utiliser onchange pour envoyer le chemin de l'image vers le serveur puis le renvoyer au client... :koi:

Citation:

Envoyé par Bovino

Ou l'appeler via Ajax...

Ajax, ce n'est pas du Javascript à la base ?
13/08/2008, 12h08
Bovino

Citation:

Envoyé par Sub0

Ajax, ce n'est pas du Javascript à la base ?

Si, mais le fichier sur lequel tu fais la requête n'est pas du javascript...
13/08/2008, 12h22
Sub0

Je vois. Je vais faire un essai.

Apparemment, la question a déjà été posée dans le forum Ajax :
http://www.developpez.net/forums/sho...d.php?t=556238

Peut-être une piste ici :

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
<html>
<body>
<script>
var url = "post.php";
var binary;
var filename;
var mytext;
 
function upload() {
	filename = document.getElementById('myfile').value;
	mytext = document.getElementById('mytext').value;
	document.getElementById('ajaxbutton').disabled = true;
 
	// request local file read permission
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	} catch (e) {
		alert("Permission to read file was denied.");
	}
 
	// open the local file
	var file = Components.classes["@mozilla.org/file/local;1"]
		.createInstance(Components.interfaces.nsILocalFile);
	file.initWithPath( filename );		
	stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
		.createInstance(Components.interfaces.nsIFileInputStream);
	stream.init(file,	0x01, 00004, null);
	var bstream =  Components.classes["@mozilla.org/network/buffered-input-stream;1"]
		.getService();
	bstream.QueryInterface(Components.interfaces.nsIBufferedInputStream);
	bstream.init(stream, 1000);
	bstream.QueryInterface(Components.interfaces.nsIInputStream);
	binary = Components.classes["@mozilla.org/binaryinputstream;1"]
		.createInstance(Components.interfaces.nsIBinaryInputStream);
	binary.setInputStream (stream);
 
	// start AJAX file upload in 1 second
	window.setTimeout("ajax_upload()", 1000);
}
 
function ajax_upload() {
	// request more permissions
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	} catch (e) {
		alert("Permission to read file was denied.");
	}
 
	http_request = false;
	http_request = new XMLHttpRequest();
	if (!http_request) {
		alert('Cannot create XMLHTTP instance');
		return false;
	}
 
	// prepare the MIME POST data
	var boundaryString = 'capitano';
	var boundary = '--' + boundaryString;
	var requestbody = boundary + '\n' 
	+ 'Content-Disposition: form-data; name="mytext"' + '\n' 
	+ '\n' 
	+ mytext + '\n' 
	+ '\n' 
	+ boundary + '\n' 
	+ 'Content-Disposition: form-data; name="myfile"; filename="' 
		+ filename + '"' + '\n' 
	+ 'Content-Type: application/octet-stream' + '\n' 
	+ '\n'
	+ escape(binary.readBytes(binary.available()))
	+ '\n'
	+ boundary;
 
	document.getElementById('sizespan').innerHTML = 
		"requestbody.length=" + requestbody.length;
 
	// do the AJAX request
	http_request.onreadystatechange = requestdone;
	http_request.open('POST', url, true);
	http_request.setRequestHeader("Content-type", "multipart/form-data; \
		boundary=\"" + boundaryString + "\"");
	http_request.setRequestHeader("Connection", "close");
	http_request.setRequestHeader("Content-length", requestbody.length);
	http_request.send(requestbody);
 
}
 
function requestdone() {
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			result = http_request.responseText;
			document.getElementById('myspan').innerHTML = result;            
		} else {
			alert('There was a problem with the request.');
		}
		document.getElementById('ajaxbutton').disabled = false;
	}
}
 
</script>
 
<form>
Text: <input type="text" id="mytext" name="mytext" size="40">
<br>
File: <input type="file" id="myfile" name="datafile" size="40"><br>
<input type="button" id="ajaxbutton" value="AJAX IT" onclick="upload();">
</form>
 
<div id="sizespan"></div>
<hr>
<div id="myspan"></div>
 
</body>
</html>

Mais cela revient à télécharger l'image avant de l'afficher, non ?

13/08/2008, 12h46
Bovino

Oui, la mettre temporairement sur le serveur pour pouvoir la visualiser...
13/08/2008, 13h03
Sub0

Dans ce cas, il n'y a pas d'intérêt. :(

L'objectif de ce sujet est justement de prévisualiser l'image avant de lancer son téléchargement.
Sinon, l'utilisateur n'a qu'à télécharger l'image (onchange) puis l'afficher après le submit, tout simplement.

Peut-être possible avec Flash alors...
13/08/2008, 14h12
kilian67

Citation:

Envoyé par Sub0

Dans ce cas, il n'y a pas d'intérêt. :(

L'objectif de ce sujet est justement de prévisualiser l'image avant de lancer son téléchargement.

Tu as raison Sub0 c'est cela que je souhaiterai, je vais tester avec onchange mais n'étant pas chez moi je regarderai ça ce soir.
13/08/2008, 14h18
Bovino

D'un autre coté, techniquement, il est impossible d'afficher une image sans qu'elle soit téléchargée (au moins dans le cache de la machine), donc à quoi ça sert de ne pas télécharger une image qu'on va quand même télécharger ?
13/08/2008, 14h19
Sub0

J'ai trouvé une solution en utilisant une popup! :yaisse2:

Je vous prépare une démo.

Encore mieux, avec innerHTML ! :yaisse3:

Code:

1
2
3
4
5
6
7
8
<script type="text/JavaScript">
  function preview(filename){
    document.getElementById('div1').innerHTML='<img src="file://'+filename+'" width="200px" height="auto"/>';
  }
</script>
 
<input type="file" onchange="preview(this.value);"/><br/><br/>
<div id="div1"></div>

Suis trop fort! :D

13/08/2008, 19h33
D-Ray

C'est un test offline que t'as fait?
Parce qu'en online, avec Firefox 3.0, ça ne marche pas...
Mesure de sécurite qu'il me dit.
13/08/2008, 19h37
Sub0

Ok. Je vais regarder ça de plus près.

[EDIT] En effet, il semblerait que ça ne fonctionne pas à partir d'un serveur :
http://sub0.developpez.com/php/i_m.php

C'est bizarre puisque ça retourne le même chemin d'image qu'avec l'exécution locale...
De plus, lorsqu'on clique sur "informations sur la page", dans l'onglet "médias", on peut voir l'image.

C'est la même chose avec la popup.
Fausse joie, dommage. :(
14/08/2008, 12h03
aityahia
salut

quand je tente de récupérer le chemin de limage après l'éxécution du script.
j'ai ça :

Code:

file://monimage.jpg/

plus de chemin,

par contre avec IE7 le Script ci-dessous fonctionne parfaitement même sur un serveur avec redimensionnement de l'image en gardant le rapport Hauteur,Largeur .
Code:

1 2 3 4 5 6 7 function voirimg( input) { //1ERE FOIS apercu=input.value; inImg= 'file:///'+apercu; document.getElementById('img').innerHTML='<img class="photo" src="file:///'+apercu+'" border="0">'; }
la seul différence entre mon script et celui de Sub0 est que moi je récupère l'objet input comme paramètre et Sub récupère ça valeur.

a+
14/08/2008, 14h49
D-Ray

En effet je constate le même problème sous firefox... Je vais tenter de voir si on peut pas y faire quelquechose...

Au fait, aityahia, nul besoin de placer trois '/' dans "file:///", deux suffisent, normalement :P .

--- EDIT ---

Il semblerait qu'on ne puisse pas récupérer le chemin absolu, du moins la doc de firefox n'en parle pas...

Voir 40 message(s) de cette discussion en une page