web-dev-qa-db-ja.com

ラベリングファイルのアップロードボタン

ファイルピッカーのボタンテキストを国際化するにはどうすればよいですか？たとえば、このコードがユーザーに提示するもの：

 <input type="file" .../>
htmlinternationalizationdialog
45
mkoryak

通常はブラウザによって提供され、変更が難しいため、唯一の方法はCSS/JavaScriptハック、

いくつかのアプローチについては、次のリンクを参照してください。

34
ChristopheD

下がってください！まず、ユーザーがデバイスで外部ロケールを使用していることを前提としています。これは、ファイルピッカーのボタンテキストを引き継いで何を言うかを正当化するための適切な仮定ではありませんyou欲しい。

ページに表示される言語のすべての項目を制御することは合理的です。ただし、ファイルアップロードコントロールのコンテンツはHTMLの一部ではありません。このコントロールの背後にはさらに多くのコンテンツがあります。たとえば、WebKitでは、ボタンの横に「ファイルが選択されていません」と表示されます。

これを試みる非常にハッキングされた回避策があります（@ChristopheDの回答で言及されたもののような）が、どれも本当に成功しません：

  • スクリーンリーダーに対して、ファイルコントロールは引き続き「参照...」または「ファイルを選択」と表示し、カスタムファイルのアップロードはファイルアップロードコントロールとしてではなく、ボタンまたはテキスト入力として通知されます。
  • それらの多くは、選択したファイルの表示に失敗するか、ユーザーがファイルを選択しなくなったことを示しません
  • それらの多くは、ネイティブコントロールに似ていないため、非標準デバイスでは奇妙に見えるかもしれません。
  • キーボードのサポートは通常貧弱です。
  • 作成者が作成したUIコンポーネントは、ネイティブの同等のコンポーネントほど完全に機能することはありません（Windows 7でIE10を想定して動作させるほど、他のブラウザーとオペレーティングシステムの組み合わせから逸脱します）。
  • 最新のブラウザは、ネイティブファイルアップロードコントロールへのドラッグアンドドロップをサポートしています。
  • 一部の手法は、ユーザーをだましてファイルをアップロードさせる「クリックジャッキング」の潜在的な試みとして、セキュリティソフトウェアでヒューリスティックをトリガーする場合があります。

ネイティブコントロールからの逸脱は常に危険なことであり、ユーザーが使用できるさまざまなデバイスのホストが存在し、回避策を選択しても、それらのデバイスのすべてでテストすることはできません。

ただし、ユーザーエクスペリエンスの観点からすべての試行が失敗する理由はさらに大きくなります。このコントロールの背後には、ファイル選択ダイアログ自体の非ローカライズコンテンツがさらに多くあります。ユーザーがファイルシステムをスキャンしたり、アップロードするファイルを選択しないようにしたりすると、ホストオペレーティングシステムのロケールが適用されます。

テキストをローカライズするためだけに、ネイティブコントロールから逸脱することでユーザーに何らかの正義を行っているのは確かです。テキストをクリックするとすぐに、オペレーティングシステムのロケールが取得されます。

ユーザーにできる最善の方法は、ファイル入力コントロールに関する適切なローカライズガイダンスを確実に作成することです。 （例：フォームフィールドラベル、ヒントテキスト、ツールチップテキスト）。

ごめんなさい。 :-(

-

この回答は、ファイルアップロードコントロールをローカライズするための正当化notを探している人向けです。

14
Lee Kowalkowski

ボタンのブラウザの言語を取得します。プログラムで変更する方法はありません。

13
Seb

純粋な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>

ソース： http://tympanus.net/codrops

12
mb21

次のコードで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。

2
Joy

カスタムの「参照ボタン」ソリューションを作成するには、単に非表示の参照ボタン、カスタムボタンまたは要素、およびいくつかの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());
    });
});
2
Nimjox

ずっと使いやすい

<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
2
Riajul Islam