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

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

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, 20h48

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, 21h27

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, 03h09

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, 05h39

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, 09h09

Ou l'appeler via Ajax...

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

Je vois. Je vais faire un essai.

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

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, 13h46

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

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

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, 15h12

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.

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

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, 20h33

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, 20h37

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, 13h03

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, 15h49

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

**Sub0** · 15/08/2008, 02h21

Envoyé par aityahia

par contre avec IE7 le Script ci-dessous fonctionne parfaitement

Il doit sûrement y avoir une option de sécurité à activer/désactiver dans les paramètres du navigateur car ça ne fonctionne pas chez moi, ni avec IE7, ni avec FF :
http://sub0.developpez.com/php/i_m4.php

Même si je trouve une solution à ce problème, je suis persuadé que les navigateurs afficheront des alertes de sécurité au moment de l'utilisation du script...

**Sub0** · 15/08/2008, 20h33

Rien à faire, j'ai tout essayé moi aussi. Ça marche en local mais pas en ligne.
J'ai donc cherché un moyen de placer cette page en locale à partir du site, mais je n'y suis pas parvenu...
Je ne sais pas où le navigateur stocke cette information et comment la modifier.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager