plugin File Style, changer l'apparence de input

**sooprano** · 08/01/2010, 12h22

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 :

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

1
2
<script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.filestyle.js" type="text/javascript"></script>

voici mon code complet :

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

**danielhagnoul** · 08/01/2010, 21h54

Bonsoir.

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

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

**sooprano** · 09/01/2010, 11h11

Envoyé par danielhagnoul

Bonsoir.

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

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

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

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>

**danielhagnoul** · 09/01/2010, 23h12

Bonsoir.

Envoyé par sooprano

ah bon moi sa marche pas moi

svp j veux donne moi le code soucre du

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 :

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

(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);

plugin File Style, changer l'apparence de input

jQuery

Vue hybride

Discussions similaires

Partager

Partager