入力タイプ=ファイルのHTML「ブラウズ」ボタンの名前を変更するにはどうすればよいですか？

Question

ブラウズボタンの名前を変更する方法 ""を選択しますか？例えば：

<input type=file name=browse > 

Answer 1

は - それは、あなたのブラウザが与える名前だけですそれのための。ブラウザは自由にファイルアップロードコントロールを実装することができます。たとえば、Safariでは「Choose File」と呼ばれ、おそらく使用しているものの反対側にあります。

the technique outlined on QuirksModeを使用してアップロードコントロールのカスタム表示を実装できますが、これはボタンのテキストを変更するだけではありません。

Answer 2

入力タイプ=「ファイル」フィールドには、それはすべてのブラウザ上で異なる動作をするので、それはスタイリングすることができない、または少しスタイリングすることができ、再びブラウザによっては非常にトリッキーです。サイズ変更が難しい（ブラウザによっては、上書きできない最小サイズがあるかもしれない）。

ただし、回避策があります。最高のものは私の意見でthis oneです（結果はhereです）。

Answer 3

いいえ、ファイルアップロード入力のテキストを変更することはできません。しかし、ボタンの上にイメージを重ねるいくつかのトリックがあります。

Answer 4

AFAIKボタンのテキストを変更することはできません。ブラウザでは、ハードコードされています。

しかし、フォーム上のdiferentテキスト/画像でボタンを配置するには、いくつかの回避策があります。ボタンは、「ブラウズボタン」と呼ばれていません

link

Answer 5

Uploadifyを使用することもできます。これは素晴らしいjQueryアップロードプラグインです。複数のファイルをアップロードして、簡単にファイルフィールドをスタイルすることもできます。

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
    var textinput = document.getElementById("filename"); 
    textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

ない素敵な探して解決策を、それが動作します： http://www.uploadify.com

Answer 6

のJavaScriptのビットは、それの世話をします。

Answer 7

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
} 
function Handlechange() 
{ 
var fileinput = document.getElementById("browse"); 
var textinput = document.getElementById("filename"); 
textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

http://jsfiddle.net/J8ekg/

Answer 8

あなたは、単純なCSS/JQの回避策でそれを行うことができます。 隠されている参照ボタンをトリガーする偽のボタンを作成します。

HTML

<input type="file"/> 
<button>Open</button> 

CSS

input { display: none } 

jQueryの

$('button').click(function(e) { 
    e.preventDefault(); // prevents submitting 
    $('input').trigger('click'); 
}); 

demo

Answer 9

1. ラップタグを有する<input type="file">;
2. <span>または<a>のように、ラベル内に（必要なテキストを含む）タグを追加します。
3. このタグをボタンのように見せます。
4. display: noneでinput[type="file"]を表示しないようにします。

の