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

StackOverflow https://stackoverflow.com/questions/108149

  •  01-07-2019
  •  | 
  •  

質問

を使用すると、HTMLで生成される参照ボタンを置き換えることができることはわかっています input タグ付き type="file.

何が最善の方法なのかわからないので、これに関する経験のある人がいたら、貢献してください。

役に立ちましたか？

解決

最良の方法は、ファイル入力コントロールを作成することです ほとんど 不可視 (不透明度を非常に低く設定することにより、これは行わないでください)可視性:隠れた" または "画面：なし") そしてその下に何かを絶対に配置します。 Zインデックス.

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

この記事 テクニックについて詳しく解説します。

他のヒント

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

例えば：

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

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

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

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

ただし、いくつかの回避策があります - を見てください。 http://www.quirksmode.org/dom/inputfile.html 一例として。

記録のために言っておきますが、この質問はすでに行われています ここ （私も同じ答えをしました）。

次のような Flash アップローダーを使用できます SWFアップロード これも行うために。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top