html - HTMLのファイル参照ボタンを置き換える最良の方法は何ですか？

Question

inputタグを。で使用すると、htmlで生成された参照ボタンを置き換えることができることを知っていますtype="file。

最善の方法がわからないので、誰かがこれを経験したことがあれば、貢献してください。

Answer 1

最良の方法は、ファイル入力コントロールをほとんど見えなくし（不透明度を非常に低くすることで、「可視性：非表示」または「表示：なし」を実行しないでください）、その下に何かを絶対に配置します（z-indexを低くします） 。

このようにすると、実際のコントロールは表示されず、その下に置いたものはすべて透けて見えます。ただし、コントロールはそのボタンの上に配置されているため、クリックイベントは引き続きキャプチャされます（これが、可視性や表示ではなく不透明度を使用する理由です。ブラウザを使用して要素を非表示にすると、要素はクリックできなくなります）。

この記事では、この手法について詳しく説明します。

Answer 2

ブラウザは、ファイル入力をいじくり回すのを本当に嫌いますが、これを行うことは可能です。いくつかのテクニックを見てきましたが、最も簡単なのは、ボタンとして使用したいものの上にファイル入力を絶対に配置し、不透明度をゼロまたはほぼゼロに設定することです。これは、ユーザーが画像（またはその下にあるもの）をクリックすると、実際には非表示の参照ボタンをクリックしていることを意味します。

例えば：

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Answer 3

javascriptを使用してもかまわない場合は、ファイル入力の不透明度を0に設定し、スタイル付きコントロールをz-indexを介して上に配置し、ボタンからファイル入力にクリックイベントを送信できます。テクニックについてはこちらをご覧ください：http ：//www.quirksmode.org/dom/inputfile.html

Answer 4

これはセキュリティ上の理由から技術的には不可能であるため、ユーザーを誤解させることはできません。

ただし、いくつかの回避策があります。1つの例については、 http：//www.quirksmode.org/dom/inputfile.htmlを参照してください。

記録のために、この質問はすでにここで尋ねられています（私が同じ答えをしたところ）。

Answer 5

SWFuploadのようなFlashアップローダーを使用してこれを行うこともできます。