Langue du champ de type fichier d'un formulaire

**laurentSc** · 31/10/2014, 02h44

Bonsoir,

je n'arrive pas à passer en anglais un champ de type fichier d'un formulaire. Ce champ est <input type="file" name="champFichier" id="champFichier">et j'ai indiqué <html lang="en"> mais ça continue d'écrire "parcourir". Pourquoi ?

**NoSmoking** · 31/10/2014, 07h48

Bonjour,
Personnalisation d'un formulaire XHTML en Javascript et CSS.

**laurentSc** · 31/10/2014, 10h56

OK, mais vu que j'insère ce code dans un code qui contient une barre de progression (qui n'est pas de moi, évidemment), pour ne pas trop modifier ce code, j'ai tenté de modifier le code de la personnalisation, etc. que tu m'as montré, et voilà (je n'ai pas modifié le CSS) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<fieldset id="conteneurFile">
    <div id="divFile">
		 <input type="file" name="champsFichier" id="champsFichier" class="inputText" readonly="readonly"/>
		 <input type="file" onmousedown="return false" onkeydown="return false" class="inputFile" onchange="document.getElementById('champsFichier').value = this.value" />
		 <span>To browse...</span>
		 <br> 
		 <input type="button" value="To Upload" onclick="uploadFile()"> 
		 <h3 id="status"></h3>	
    </div>
</fieldset>
 </form> 
 
<div><div id="barreProgress"></div></div>

mais le "parcourir" est encore là, et de plus, ça ne parcourt plus quand on clique sur le bouton...

avant la modif, c'était comme ça :

Code html :

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

1
2
3
4
5
 <input type="file" name="champsFichier" id="champsFichier"><br> 
 <input type="button" value="To Upload" onclick="uploadFile()"> 
 <h3 id="status"></h3> </form> 
 
<div><div id="barreProgress"></div></div>

Code css :

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

1
2
.groupProgress{ width:100px;height:10px;border:1px solid #999;background:#eee;}  
#barreProgress{width:0px;height:10px;background:red;}

Code javascript :

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
function _(el){ return document.getElementById(el);} 
 
function uploadFile(){  
	var fichier = _("champsFichier").files[0];  
	var formdata = new FormData();  
	formdata.append("fichier", fichier);  
	var ajax = new XMLHttpRequest(); 
	ajax.addEventListener("load", actionTerminee, false);  
	ajax.addEventListener("error", enErreur, false);  
	ajax.addEventListener("abort", operationAnnulee, false);  
	ajax.upload.addEventListener("progress", enProgression, false);   
	ajax.open("POST", "upload.php");  ajax.send(formdata); 
	} 
 
function enProgression(e){  
	var pourcentage = Math.round((e.loaded * 100) / e.total);  
	_("barreProgress").style.width=pourcentage+"%"; }  
 
function actionTerminee(e){  _("status").innerHTML = e.target.responseText; } 
 
function enErreur(e){  _("status").innerHTML = "Upload Failed"; } 
 
function operationAnnulee(e){  _("status").innerHTML = "Upload Aborted"; }

et je n'ai pas touché au CSS ni au js...

**NoSmoking** · 31/10/2014, 16h56

Changer le texte d'un INPUT file .... Barre de progression ... plusieurs INPUT File ....

je te présente mes excuses mais je n'y comprend rien... à tout hasard il existe

Code :

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

<input type="file" multiple ...

**laurentSc** · 31/10/2014, 17h40

Bon tant pis (avant la modif, ça uploadait bien ; on ne voyait qu'un seul champ, pour sélectionner le fichier, et y avait bien une barre de progression pendant l'upload ; seul hyatus, le mot "parcourir" que j'aurais voulu mettre en français). Je vais résumer mon besoin ; peut-être as-tu une autre réponse :

un formulaire qui permet de sélectionner un fichier sur le disque dûr (en anglais). Le fichier est ensuite uploadé sur le serveur et pendant l'upload, une barre de progression est affichée.

**laurentSc** · 01/11/2014, 12h35

Bon, j'ai trouvé une autre solution pour une barre de progression (http://www.orugari.fr/orugari/upload...jquery-et-php/) (certes le rapport avec le html est léger

). Avant d'intégrer ça dans mon site, j'ai tenté d'appliquer ta recommandation à leur code...et ça marche pas

. Cette solution est à rallonge, mais je donne quand même le code avant modif puis après :

Avant modif :

Code php+jquery :

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
<?php
session_start();
 
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
 
        $target_folder = "tmp/"; //where need to upload the file
        $file_name = $_FILES["userfile"]['name']; //real file name
        if(is_file($target_folder.$file_name)) { $file_name = time()."_".$file_name; } //if file already exist, change the name to not overwrite it
        move_uploaded_file($_FILES["userfile"]['tmp_name'], $target_folder.$file_name); //moving the file
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Upload your files and see it going on on a smoothy progress bar with jquery !" />
	<meta name="author" content="Frederic Pioch" />
	<title>Progress bar upload with jquery</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.2/themes/dot-luv/jquery-ui.css" />
	<link rel="stylesheet" href="progressbar.css" />
</head>
<body>
 
<div id="main_bloc">
	<h1 id="title">- Progress Bar with Jquery -</h1>
	<br />
	<br />
 
 
 
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST" id="myForm" enctype="multipart/form-data" target="hidden_iframe">
	<fieldset id="conteneurFile">
    <div id="divFile">
   <input type="hidden" value="myForm"  name="<?=ini_get("session.upload_progress.name")?>" />
<label for="userfile">Choose a file:</label> 
<input type="text" id="input_text_file" class="inputText" readonly="readonly" /> 
   <input type="file" name="userfile" id="userfile" onmousedown="return false" onkeydown="return false" class="inputFile" onchange="document.getElementById('input_text_file').value = this.value" required />
    <span>To browse...</span>
	    </div>
</fieldset>
   <br />
   <br />
   <input type="submit" value="Start Upload" class="ui-corner-all" />
 
</form>	
 
 
 
<div class="progress-bar blue stripes" id="bar_blank">	<span class="bar_content" style="width: 0%"></span> </div>
		<br />
		<br />
<div id="status"></div>
  <iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
 
 
</div>
<div id="footer"> 
 
- <a href="http://www.orugari.fr/portfolio/" target="_blank">Home Page</a> - 
<a href="https://github.com/orugari" target="_blank">Github</a> - 
<a href="https://www.facebook.com/frederic.pioch" target="_blank">Facebook</a> - 
<br />
<br />
<a href="http://validator.w3.org/check?uri=<?=$_SERVER['HTTP_HOST'].$_SERVER["PHP_SELF"]?>&amp;charset=(detect+automatically)&amp;doctype=Inline&amp;group=0" target="_blank">
	<img src="http://www.w3.org/QA/Tools/I_heart_validator_lg" alt="validate me" />
</a>
</div>
<script>
$(document).ready(function(){
// The action before and after upload
function toggleBarVisibility() {
        $("#status").show("blind", 1000).html('Uploading...');
        $( "#bar_blank" ).css( "display", "block");
        $(".bar_content").css('width','0%');
}
// We get the current % on upload_frame.php
function sendRequest() {
        $.get('upload_frame.php', function(http) {       handleResponse(http);  });
}
 
//the function for update the progress bar and check if finish
function handleResponse(http) {
                //we set the width with jquery
                $(".bar_content").css('width',''+http+'%');
                // If still not finish, we refresh the request which get the content of upload_frame.php
                if (http < 100) { var t=setTimeout(sendRequest, 1000);  }
                // If finish, everything here will be done
                else 
                {
                        //random effect, do what ever you want
                        $(".bar_content").removeClass(".bar_content").css('width','100%');
                        $( "#bar_blank" ).delay(2000).hide("highlight", 1000);
                        $("#status").html('Upload finished !').delay(2000).hide("blind", 1000);
                }
}
// The function when you send the Form
function startUpload() {
        toggleBarVisibility();
        var t=setTimeout(sendRequest, 1000);
}
//everything start here
$("#myForm").submit(function() { if($('#userfile').val() != '') { startUpload();        } });
 
//just stylish button from jquery ui
$( "[type=submit]" ).button();
 
});
</script>
</body>
</html>

+ upload_frame.php :

Code php :

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
<?php
 
session_start();
 
 
 
$key = ini_get("session.upload_progress.prefix") . "myForm";
 
if (!empty($_SESSION[$key])) {
 
    $current = $_SESSION[$key]["bytes_processed"]; // This is the current upload progress
 
    $total = $_SESSION[$key]["content_length"]; // Total weight of the file
 
    if($current < $total) 
 
		{
 
		echo ceil($current / $total * 100);
 
		}
 
		else
 
		{
 
		echo "100";
 
		}
 
	 echo $current < $total ? ceil($current / $total * 100) : 100;
 
}
 
else 
 
{
 
    echo "100";
 
}
 
?>

+ progressbar.css :

Code css :

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/* ----------- Basic style ------------- */
 
@font-face {
    font-family: 'League_Gothic-webfont';
    src: url('../portfolio/fonts/League_Gothic-webfont.eot');
    src: url('../portfolio/fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../portfolio/fonts/League_Gothic-webfont.woff') format('woff'),
         url('../portfolio/fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('../portfolio/fonts/League_Gothic-webfont.svg#League_Gothic-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
 
 
 
}
 
 
html, body {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: "Lucida Bright","Kozuka Gothic Pro","Times New Roman",Times,serif;
	background-color: rgb(230, 230, 230);
}
 
 
 
#main_bloc {
	width: 850px;
	min-height:700px;
	margin: 20px auto;
	text-align:center;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    box-shadow: 10px 10px 0px 2px rgb(137, 137, 137);
	overflow:hidden;
 
}
 
#title {
	display:inline-block;
	margin: 80px auto;
	font-size: 50px;
	letter-spacing: 2px;
	font-family: League_Gothic-webfont, Arial;
 
}
 
input[type=submit] { 
	font-size: .8em !important; 
	}
 
 
#footer { width:100%; padding: 10px 0; margin:45px 0 0 0; text-align:center; background: #f2f2f2; height:150px; border-top:2px solid #bab9b9;}
 
 
a {
	text-decoration:none;
	color:#00c3e6;
	}
 
a:hover { text-decoration:underline; }
 
a img { border:none; }
label, #status { font-weight:bold; }
 
 
/*------------ Do not display the bar before upload ------ */
 
 
#bar_blank, #hidden_iframe {  display: none; margin: 20px auto;}
 
 
/*------------ The bar to fill ---------------*/			
 
.bar_content { display:inline-block; }
 
.progress-bar {
	background-color: #1a1a1a;
	height: 25px;
	padding: 5px;
	width: 90%;
	min-width:250px;
	overflow:hidden;
	 margin: 20px auto;		
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}
 
.progress-bar span {
	float:left;
	display: inline-block;
	height: 100%;
	background-color: #777;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width 1.4s ease-in-out;
	-ms-transition: width 1.4s ease-in-out;
	-o-transition: width 1.4s ease-in-out;
	transition: width 1.4s ease-in-out;		
 
}
 
/*----------- The color of the progress bar ----------------*/			
 
 
.blue span { background-color: #34e359;  }
 
 
/*----------- The stripes (for any browser) ----------------*/		
 
.stripes span {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
 
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}
 
@-webkit-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
 
@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
 
/*---------------------------*/

et après modif (pas changé le CSS et dans upload_frame.php, juste changé . "myForm" par . "upload_form" et aussi créé le répertoire "tmp")(Ca reste en français mais ça uploade bien)
et fichier du formulaire d'upload :

Code php :

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
<?php
session_start();
 
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
 
	$target_folder = "tmp/"; //where need to upload the file
	$file_name = $_FILES["userfile"]['name']; //real file name
	if(is_file($target_folder.$file_name)) { $file_name = time()."_".$file_name; } //if file already exist, change the name to not overwrite it
	move_uploaded_file($_FILES["userfile"]['tmp_name'], $target_folder.$file_name); //moving the file
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Upload your files and see it going on on a smoothy progress bar with jquery !" />
	<meta name="author" content="Frederic Pioch" />
	<title>Progress bar upload with jquery</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.2/themes/dot-luv/jquery-ui.css" />
	<link rel="stylesheet" href="progressbar.css" />
</head>
<body>
 
<div id="main_bloc">
	<h1 id="title">- Progress Bar with Jquery -</h1>
	<br />
	<br />
 
 
 
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST" id="upload_form" enctype="multipart/form-data" target="hidden_iframe">
	<fieldset id="conteneurFile">
    <div id="divFile">
   <input type="hidden" value="upload_form"  name="<?=ini_get("session.upload_progress.name")?>" />
<label for="userfile">Choose a file:</label> 
<input type="text" id="input_text_file" class="inputText" readonly="readonly" /> 
   <input type="file" name="userfile" id="userfile" onmousedown="return false" onkeydown="return false" class="inputFile" onchange="document.getElementById('input_text_file').value = this.value" required />
    <span>To browse...</span>
	    </div>
</fieldset>
   <br />
   <br />
   <input type="submit" value="Start Upload" class="ui-corner-all" />
 
</form>	
 
 
 
<div class="progress-bar blue stripes" id="bar_blank">	<span class="bar_content" style="width: 0%"></span> </div>
		<br />
		<br />
<div id="status"></div>
  <iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
 
 
</div>
 
<script>
$(document).ready(function(){
// The action before and after upload
function toggleBarVisibility() {
	$("#status").show("blind", 1000).html('Uploading...');
	$( "#bar_blank" ).css( "display", "block");
	$(".bar_content").css('width','0%');
}
// We get the current % on upload_frame.php
function sendRequest() {
	$.get('upload_frame.php', function(http) {	 handleResponse(http); 	});
}
 
//the function for update the progress bar and check if finish
function handleResponse(http) {
		//we set the width with jquery
		$(".bar_content").css('width',''+http+'%');
		// If still not finish, we refresh the request which get the content of upload_frame.php
		if (http < 100) { var t=setTimeout(sendRequest, 1000);	}
		// If finish, everything here will be done
		else 
		{
			//random effect, do what ever you want
			$(".bar_content").removeClass(".bar_content").css('width','100%');
			$( "#bar_blank" ).delay(2000).hide("highlight", 1000);
			$("#status").html('Upload finished !').delay(2000).hide("blind", 1000);
		}
}
// The function when you send the Form
function startUpload() {
	toggleBarVisibility();
	var t=setTimeout(sendRequest, 1000);
}
//everything start here
$("#upload_form").submit(function() { if($('#userfile').val() != '') { startUpload();	} });
 
//just stylish button from jquery ui
$( "[type=submit]" ).button();
 
});
</script>
</body>
</html>

**laurentSc** · 01/11/2014, 20h27

Je jette l'éponge

**dasdeb** · 09/11/2014, 15h47

Pour moi c'est normal que tu ne puisses pas changer la langue pour l'intitulé du bouton parcourir.
C'est le navigateur qui s'en occupe en fonction de la langue du système d'exploitation choisie par le propriétaire de l'ordi.
La personne peut toujours changer la langue utilisée par le navigateur, mais c'est elle qui décide.
Je ne sais pas si je suis clair dans mon explication