6

どこかにinput type="file"リンクがあり、リンクをクリックすると、ファイル入力のクリックもトリガーされます。ユーザーがファイルを選択します。

IE8/9 では、ユーザーがクリックするとbutton type="submit"、最初のクリックでファイル入力のすべてのデータがクリアされ、2 番目のクリックで空白のフォームが送信されます。

input type="file"JavaScript クリック トリガーによる投稿の送信を許可するにはどうすればよいですか。

いくつかのメモ:

  • クリックは、別のクリック イベントの結果としてトリガーされました。イベント内。
  • input type="file" が display: none に設定されていません。
  • ユーザー入力を操作する試みは行われませんでした

アイデア？

4

2 に答える 2

5

私は同じ問題に苦労してきましたが、まだきれいな解決策に出くわしていません。

ただし、回避策を発見しました。以下の解決策はベスト プラクティスを完全に無視していることに注意してください (私の謙虚な意見では)。誰かがこれを行うためのより良い、より標準に準拠した方法を持っている場合は、ここに投稿してください。

ボタンクリックイベントの修正

かなりの量の調査の後、多くの人がトリックを使用して<input type="file" />、ボタンのすぐ上に を絶対に配置し、不透明度をゼロに設定しているようです。これは、ユーザーにはボタンをクリックしているように見えますが、ブラウザはボタンをクリックしたように見えることを意味します<input type="file" />(したがって、IE で前述の問題を回避します)。Quirksmodeが実際にこのアプローチを推奨していたことに驚きました。

ボタンのスタイルを修正する

さて、これはさらなる外観上の問題を引き起こします。ボタンがCSS 疑似クラス:hoverをトリガーしなくなったり(ボタン内に を配置しない限り)、ボタンに適用した CSS に関係なく、マウス カーソルがおそらくデフォルトのマウス カーソルになることがあります。:active<input type="file" /><input type="file" />

クラスは JavaScript の回避策で簡単に修正できます (それはあなたに任せます) が、カーソルは依然として問題です。奇妙なことにcursor、 の右側pathのをスタイルできますが、これはボタン<input type="file" \>には影響しません。Browse残念ながら、この (現在は透明な) ボタンはおそらくスタイル ボタンの一部の上にあるため、ホバー時にデフォルトのカーソルが表示されます。

これを解決するために、この回避策 (JSFiddle here ) を偶然見つけました。基本的に、誰かがボタンのイベントにイベントをバインドし、ボタンにカーソルを合わせるたびに、マウス カーソルmousemoveの下の右側に配置します。ボタンのサイズと設定が固定されていない場合、ボタンの座標の外側から がクリックされない<input type="file" />ようにするために、これを少し拡張する必要がある場合もあります。<input type="file" />overflow: hidden

結論

全体として、スタイリング<input type="file" />はそれだけの価値がないことがわかりました。ハックが多すぎて、本当に見栄えを良くしたいのであれば、おそらくどこかの時点で JavaScript を使わなければならないでしょう (JavaScript が無効になっている人をサポートしようとしている場合はあまり良くありません)。また、これがモバイルにどのように影響するかについてもわかりません。

Html5 File APIをサポートする新しいブラウザーをターゲットにしている場合は、AJAX ドラッグ アンド ドロップ アップロード ソリューションを実装し (こちらは優れたソリューションです)、<input type="file" />完全に削除してください。それをサポートしていないもの (古いブラウザーや JavaScript が無効になっているもの) については、フォールバックとして unstyled のまま<input type="file" />にしておいてください。

于 2013-04-22T15:46:36.747 に答える
2

jquery fileupload 拡張機能を使用する方が優れていることがわかりました。手動で行っていた場合よりもはるかにうまく複雑に処理できます。基本的には、x-browser dom 操作と ajax に対して jquery が行うことを行いますが、input type="file" に対しては行います。

于 2013-07-08T12:58:59.793 に答える