plugin File Style, changer l'apparence de input

Version imprimable

salut je voulais changer l'apparence de input type file apres recherche je me suis tombé sur ce tuto : http://www.appelsiini.net/projects/filestyle

voici le demo : http://www.appelsiini.net/projects/filestyle/demo.html

comme vous voyez le tuto est en anglais :( je trouve mal a comprendre mais bon ..

j'ai copie le code javascript et l'image
Code:

1 2 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.filestyle.js" type="text/javascript"></script>
voici mon code complet :
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 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.filestyle.js" type="text/javascript"></script> </head> <body> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label> <input type="file" name="file" /> </label> <script language="javascript"> $("input[type=file]").filestyle({ image: "choose-file.gif", imageheight : 22, imagewidth : 82, width : 250 }); </script> </form> </body> </html>
malheureusement sa marche pas :( svp aidez moi ?

Bonsoir.

Je viens de découvrir ce plugin et de le tester sans problème. Voici mon code :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
    <!-- <base href="http://danielhagnoul.developpez.com/"> -->
    <base href="file:///C:/Documents%20and%20Settings/user/Mes%20Documents/KOMODO%20SPACE/DVJH/efface11.html"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
 
		/* TEST */
		input.file {
			background: #eeeeee;
			color: #111111;
		}
	</style>
	<script src="lib/jquery-1.4a2.min.js" charset="utf-8"></script>
	<script src="lib/jquery.filestyle.mini.js" charset="utf-8"></script>
	<script>
		$(document).ready(function(){
 
			$("input[type='file']").filestyle({ 
				image: "images/choose-file.gif",
				imageheight : 22,
				imagewidth : 82,
				width : 250
			});
 
			$("input[type='file']").change(function(){
				$("#conteneur").append("<p>" + $(this).val() + "</p>");
			});
 
		});
	</script>	
</head>
<body>
	<div id="conteneur">		
		<div id="affiche">
            <form action="#"> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" />
            </form> 
		</div>
	</div>
</body>  
</html>

Citation:

Envoyé par danielhagnoul

Bonsoir.

Je viens de découvrir ce plugin et de le tester sans problème. Voici mon code :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
    <!-- <base href="http://danielhagnoul.developpez.com/"> -->
    <base href="file:///C:/Documents%20and%20Settings/user/Mes%20Documents/KOMODO%20SPACE/DVJH/efface11.html"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
 
		/* TEST */
		input.file {
			background: #eeeeee;
			color: #111111;
		}
	</style>
	<script src="lib/jquery-1.4a2.min.js" charset="utf-8"></script>
	<script src="lib/jquery.filestyle.mini.js" charset="utf-8"></script>
	<script>
		$(document).ready(function(){
 
			$("input[type='file']").filestyle({ 
				image: "images/choose-file.gif",
				imageheight : 22,
				imagewidth : 82,
				width : 250
			});
 
			$("input[type='file']").change(function(){
				$("#conteneur").append("<p>" + $(this).val() + "</p>");
			});
 
		});
	</script>	
</head>
<body>
	<div id="conteneur">		
		<div id="affiche">
            <form action="#"> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" /><br /> 
                <input type="file" class="file" />
            </form> 
		</div>
	</div>
</body>  
</html>

ah bon moi sa marche pas moi :? svp j veux donne moi le code soucre du

Code:

1
2
<script src="lib/jquery-1.4a2.min.js" charset="utf-8"></script>
	<script src="lib/jquery.filestyle.mini.js" charset="utf-8"></script>

09/01/2010, 23h12
danielhagnoul

Bonsoir.

Citation:

Envoyé par sooprano

ah bon moi sa marche pas moi :? svp j veux donne moi le code soucre du

:koi:

jQuery 1.3.2 : http://code.google.com/p/jqueryjs/do...s&downloadBtn=

jQuery 1.4a2 : http://code.jquery.com/jquery-1.4a2.min.js

plugin File Style : http://www.appelsiini.net/projects/filestyle ne fonctionne pas pour l'instant, erreur 101. Voici le code de jquery.filestyle.mini.js :

Code:

(function($){$.fn.filestyle=function(options){var settings={width:250};if(options){$.extend(settings,options);};return this.each(function(){var self=this;var wrapper=$("<div>").css({"width":settings.imagewidth+"px","height":settings.imageheight+"px","background":"url("+settings.image+") 0 0 no-repeat","background-position":"right","display":"inline","position":"absolute","overflow":"hidden"});var filename=$('<input class="file">').addClass($(self).attr("class")).css({"display":"inline","width":settings.width+"px"});$(self).before(filename);$(self).wrap(wrapper);$(self).css({"position":"relative","height":settings.imageheight+"px","width":settings.width+"px","display":"inline","cursor":"pointer","opacity":"0.0"});if($.browser.mozilla){if(/Win/.test(navigator.platform)){$(self).css("margin-left","-142px");}else{$(self).css("margin-left","-168px");};}else{$(self).css("margin-left",settings.imagewidth-settings.width+"px");};$(self).bind("change",function(){filename.val($(self).val());});});};})(jQuery);