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

**kilian67** · 10/08/2008, 16h56

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**D-Ray** · 12/08/2008, 19h48

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

**kilian67** · 12/08/2008, 20h27

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

**Sub0** · 13/08/2008, 02h09

Salut!

Votre réponse dans ce sujet.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bredelet** · 13/08/2008, 04h39

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?

**Bovino** · 13/08/2008, 08h09

Ou l'appeler via Ajax...

**Sub0** · 13/08/2008, 12h00

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

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

Envoyé par Bovino

Ou l'appeler via Ajax...

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

**Bovino** · 13/08/2008, 12h08

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

**Sub0** · 13/08/2008, 12h22

Je vois. Je vais faire un essai.

**Sub0** · 13/08/2008, 12h31

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 :

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

**Bovino** · 13/08/2008, 12h46

Oui, la mettre temporairement sur le serveur pour pouvoir la visualiser...

**Sub0** · 13/08/2008, 13h03

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

**kilian67** · 13/08/2008, 14h12

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.

**Bovino** · 13/08/2008, 14h18

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 ?

**Sub0** · 13/08/2008, 14h19

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

Je vous prépare une démo.

**Sub0** · 13/08/2008, 19h23

Encore mieux, avec innerHTML !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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-Ray** · 13/08/2008, 19h33

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.

**Sub0** · 13/08/2008, 19h37

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.

**aityahia** · 14/08/2008, 12h03

salut

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**D-Ray** · 14/08/2008, 14h49

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

.

--- EDIT ---

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

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

JavaScript

Discussions similaires

Partager

Partager