どこかでグーグル検索したjqueryを使用して入力アップロードボックスを設計しました。問題は、IEで「参照」ボタンが機能しない(クリックできない)ことです。誰かがコードを見て、私が何をすべきか、これがIEで動作するように微調整するのを手伝ってもらえますか? どうもありがとう。以下の jsfiddle に html/css/js ファイルを含めました。
1 に答える
追加した「参照」ボタンは、IE 7/8/9、Chrome、または Firefox では機能しません。あなたは別の経験をしているかもしれません。
Flashベースのファイルアップロードを使用してデフォルトのUIを完全に置き換えるか(GMailはまだこれを行っていると思います)、デフォルトの入力をそのままにして、醜い/一貫性のないものにすることをお勧めします。スタイル ファイルのアップロードには多くのハックがありますが、実際の解決策はありません (少なくとも私が遭遇したものは)。
私が見つけた純粋な HTML/CSS ソリューションに最も近いのは、ファイル入力の「参照」ボタンの上にスタイル付きボタンを重ねて、残りを非表示にすることでした。次に、全体をIFRAME
. このソリューションは機能しますが、視覚的に調整するのに何時間も費やし、含まれているページにフックするための余分なコードを追加し、IFRAME
ソリューション全体の複雑さを増しました。また、ブラウザの次の更新で壊れる可能性があります。
HTML 5 は、ファイルのアップロード プロセスに関してはるかに柔軟性を提供しますが (こちら を参照)、そのようなソリューションはまだ広くサポートされておらず、必ずしも審美的な問題に対処しているわけではありません。
ファイル入力を完全に非表示にできるので、ドラッグ アンド ドロップ機能が役立つ場合があります。新しいブラウザではこのようなソリューションを使用でき、それをサポートしていない古いブラウザでは標準のファイル入力に劣化する可能性があります。
プログレッシブエンハンスメントを使用した別の例。