ファイルピッカーのボタンテキストを国際化するにはどうすればよいですか?たとえば、このコードがユーザーに提示するもの:
<input type="file" .../>
通常はブラウザによって提供され、変更が難しいため、唯一の方法はCSS/JavaScriptハック、
いくつかのアプローチについては、次のリンクを参照してください。
下がってください!まず、ユーザーがデバイスで外部ロケールを使用していることを前提としています。これは、ファイルピッカーのボタンテキストを引き継いで何を言うかを正当化するための適切な仮定ではありませんyou欲しい。
ページに表示される言語のすべての項目を制御することは合理的です。ただし、ファイルアップロードコントロールのコンテンツはHTMLの一部ではありません。このコントロールの背後にはさらに多くのコンテンツがあります。たとえば、WebKitでは、ボタンの横に「ファイルが選択されていません」と表示されます。
これを試みる非常にハッキングされた回避策があります(@ChristopheDの回答で言及されたもののような)が、どれも本当に成功しません:
ネイティブコントロールからの逸脱は常に危険なことであり、ユーザーが使用できるさまざまなデバイスのホストが存在し、回避策を選択しても、それらのデバイスのすべてでテストすることはできません。
ただし、ユーザーエクスペリエンスの観点からすべての試行が失敗する理由はさらに大きくなります。このコントロールの背後には、ファイル選択ダイアログ自体の非ローカライズコンテンツがさらに多くあります。ユーザーがファイルシステムをスキャンしたり、アップロードするファイルを選択しないようにしたりすると、ホストオペレーティングシステムのロケールが適用されます。
テキストをローカライズするためだけに、ネイティブコントロールから逸脱することでユーザーに何らかの正義を行っているのは確かです。テキストをクリックするとすぐに、オペレーティングシステムのロケールが取得されます。
ユーザーにできる最善の方法は、ファイル入力コントロールに関する適切なローカライズガイダンスを確実に作成することです。 (例:フォームフィールドラベル、ヒントテキスト、ツールチップテキスト)。
ごめんなさい。 :-(
-
この回答は、ファイルアップロードコントロールをローカライズするための正当化notを探している人向けです。
ボタンのブラウザの言語を取得します。プログラムで変更する方法はありません。
純粋なCSSソリューション:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file (Click me)</label>
次のコードでjQueryMobileを使用してボタンを実現できます。
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
上記のコードは、「アップロード」ボタン(カスタムテキスト)を作成します。アップロードボタンをクリックすると、ファイルの参照が開始されます。 Chrome 25&IE9。
カスタムの「参照ボタン」ソリューションを作成するには、単に非表示の参照ボタン、カスタムボタンまたは要素、およびいくつかのJqueryを作成してみてください。この方法では、各ブラウザ/バージョンに依存する実際の「参照ボタン」を変更しません。 例
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
ずっと使いやすい
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>