JavaScriptの起動時にIE8/9サブミット入力タイプ= "ファイル"を作る方法

Question

私はinput type="file"がどこかのリンクをクリックしていると、ファイル入力をクリックします。ユーザーがファイルを選択します。

ユーザーがbutton type="submit"をクリックすると、最初のクリックでファイル入力内のすべてのデータが消去され、次に2番目のページが空白のフォームを送信します。

投稿するには、input type="file"のjavascriptのクリックトリガを投稿することができます。

いくつかの注意：

• クリックが別のクリックイベントの結果として誘発されました。イベント内。
• 入力タイプ= "ファイル"は表示するように設定されていません。ユーザーの入力を操作する
• 試みは

アイデアを行いませんでしたか？

Answer 1

jquery fileupload extensionを使用したほうがはるかに優れていることがわかりました。それは私が手動で行っていたよりはるかに優れた複雑さを処理します。これは基本的に、x-ブラウザdom操作のためにjqueryが何をするのですか？& ajaxですが、入力タイプ= "file"です。

Answer 2

私は同じ問題を抱えていましたが、私はまだきれいなソリューションを見つけていません。

しかし、私は回避策を発見しました。下記のソリューションはベストプラクティスを完全に無視しています（私の謙虚な意見では）、誰かがこれを行うための標準に準拠したより良い方法を持っているなら、ここに投稿してください。研究のかなりの量の後ボタンクリックイベント

を修正

、多くの人々は、彼らが絶対にそのボタンの上にすぐに<input type="file" />を配置し、ゼロに不透明度を設定することにより、トリックを使用しているようです。つまり、ユーザーはボタンをクリックしているように見えますが、ブラウザは<input type="file" />をクリックしたと見なします（したがって、IEの問題を回避します）。私は、Quirksmodeが実際にこのアプローチを推奨していることに驚いていました。

固定ボタンスタイル

さて、これはさらに化粧品の問題を紹介しません。あなたのボタンは<input type="file" />をボタンの中に入れない限り、:hoverと:activeのCSS疑似クラスを起動しなくなり、<input type="file" />に適用したCSSにもかかわらずマウスカーソルがデフォルトのマウスカーソルになる可能性がありますまたはボタンをクリックします。

クラスはJavaScriptの回避策（私はあなたに任せます）で簡単に修正できますが、カーソルは依然として問題です。不思議なことに、pathの<input type="file" \>の右側のcursorをスタイルすることができますが、これはBrowseボタンには影響しません。残念ながら、この（透明になっている）ボタンは、あなたのスタイリングされたボタンの一部の上にあり、ホバー上にデフォルトのカーソルが表示されます。

これを解決するために、this work-around（JSFiddle here）を見つけました。基本的に、誰かがイベントをボタンのイベントmousemoveにバインドし、ボタンの上にマウスカーソルを置くたびに、<input type="file" />の右側を配置しました。ボタンが固定サイズでなく、overflow: hiddenが設定されている場合、<input type="file" />がボタンの座標の外側からクリックされないようにするには、これをさらに強化する必要があります。

結論

全体的に、私は<input type="file" />をスタイリングするだけでそれだけの価値はないことを発見しました。ハッキングがあまりにも多くあります。JavaScriptを無効にしている人をサポートしようとしている場合は、本当にうまく見えるようにするには、ある時点でJavaScriptを使用する必要があります。私はまた、これがどのようにモバイルにも影響を与えないかどうかわかりません。

あなたがHtml5 File APIをサポートする新しいブラウザをターゲットにしている場合は、AJAXドラッグ/（hereが素晴らしいものである）、アップロードソリューションをドロップ実装し、完全<input type="file" />を取り除きます。サポートしていないブラウザ（旧式のブラウザやJavaScriptを無効にしているブラウザ）の場合は、フチなしでの文字列をそのまま残してください。