web-dev-qa-db-ja.com

ファイル入力ダイアログを開き、IEで可能な変更をアップロードしますか？

これは基本的に私が今持っているものを単純化したものです：

_<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="/user/photo">Upload photo</a>

<script>
$('uf').addEvent('change', function(e) {
  // alert('oele'); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
  $('uf').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>
_

Chrome 11およびFF4で）（完全に）何をするか

  1. フォームは非表示になっています。
  2. リンクをクリックします
  3. ファイル選択ダイアログが開きます
  4. ファイルを選択します
  5. ダイアログが閉じます
  6. フォームが送信されます
  7. Iframeのスクリプトが実行され、写真が置き換えられます

非常にハイテクっぽくて甘い。

IEでは、[6]を除いてすべてが機能します。フォームは送信されません。 Javascriptエラー：「アクセスが拒否されました」。ダイアログがinput.click()で開かれている限り、フォームがどのように非表示であるかは関係ありません。フォームは変更時に送信できません。 （onchange関数は正常に実行されます。エラーはform.submit()が呼び出された場合にのみ発生します。）

今、私はこれをすべて受け入れることができます。 IE最悪です。私はそれと一緒に住んでいます。

これまでの私の解決策は、navigatorで「MSIE」を確認し、ダイアログを開く代わりにリンクをクリックすると、フォームが表示されることでした（ファイル入力あり）。次に、ユーザーは実際の醜いファイル入力をクリックする必要があり、すべてが正常に機能します。しかし醜い。

質問は2つあります。

  1. IE Chromeと同じくらいかっこいい）でこれを行う方法はありますか？厄介なフラッシュ/ Javaのがらくたなしで。html要素とjavascriptのみ。
  2. そうでない場合：リンクからダイアログを開いた後にform.submit（）のサポートを確認する方法はありますか（!navigator.contains("MSIE")以外）？

[2] IEでスローされた「アクセス拒否」例外をキャッチしている可能性がありますが、手遅れです。ユーザーはすでにダイアログを開いて写真を参照しています。あなたは彼にそれを二度とさせたくない。 （IEユーザーはそれに値しません。）

PS。 Chrome 10以降、Firefox3.6以降およびIE8以降にのみ興味があります。

PS。重要かもしれません：リンクはフォーム内にあり、そのフォームはファイルアップロードフォームとは別である必要があるため、ファイル入力要素をリンクの近くに配置することはできません。

[〜＃〜]更新[〜＃〜]
次善の策：IEでのみ機能しないこのハイテクのような動作のサポートを検出します。 navigator.appName.contains('MSIE')は柔軟性がなく、必ずしも正しいとは限らないため、使用したくありません。

javascriptfile-uploadcross-browseropenfiledialog
16
Rudie

やったよ！！

http://jsfiddle.net/rudiedirkx/8hzjP/show/

<label for="picture">Upload picture</label>
<input type="file" id="picture" style="position: absolute; visibility: hidden" />

IE8は動作します。私は他人を気にしません。

とても簡単=）

8
Rudie

@ Rudie、ここまで-そのコードをありがとう！ IEとChromeではうまく機能しますが、FireFoxでは機能しません。

私はなんとか古いコード（FFとChromeで動作します）を取得し、MSIE用にコードを結合しました。

ここでそれをチェックしてください：

IEの修正、CHROME AND FIREFOX

https://Gist.github.com/4337047

問題：スクリプト化された強制クリック（）イベントを介してファイル入力を開くと、IEフォームを送信できます。自分のマウスでファイル入力をクリックすると（不要なもの）、IEでフォームを送信できます。

現在のところ、IE11では、スクリプト化された「クリック」イベントを介してファイル入力フィールドが変更された場合にフォームを送信できるようになっていることに注意してください。

Solution（Rudie @ Stackoverflowに一部感謝します、 https://stackoverflow.com/users/247372/rudie 、- http://hotblocks.nl/ ）：

IEで入力のラベルを作成します。それをクリックすると、入力フィールドが強制的にクリックされます-そしてIEはそれを受け入れます（dumbass IEユーザーが入力フィールドをクリックしたと思います、ハァッ）

そのため、そのラベルには、独自のスタイルのDIVを配置します。

次の問題は、これがFFでは機能しないことでした。そこで、単純な（厄介な可能性のある）ブラウザーチェックを行い、ブラウザーに基づいて別のボタンを表示します。

解決策はここにあります。テスト済み：

  • 7x64で勝つ
  • FireFox 13.01
  • クローム23.0.1271.97m
  • 通常のIE9モードのIE9

より多くのテスト/コードへの追加は大歓迎です！

編集：

引用するにはロイ・マッケンジー

IE11では、スクリプト化された「クリック」イベントによってファイル入力フィールドが変更された場合に、フォームを送信できるようになりました。

12
Rob

不思議なことに、IE8は、フォームにenctype="multipart/form-data"が含まれている場合にのみ送信をブロックします。

ローカルで機能した回避策の1つは、「実際の」送信ボタンを追加することです。

<input type="submit" id="btnSubmit" value="Submit" />

次に、そのようなコードを送信します。

$('btnSubmit').click();

これが機能する場合は、CSSでボタンを非表示にして、ユーザーに対して透過的にすることができます。

2
Shadow Wizard is Ear For You

さて、これは私が今抱えているのとまったく同じ問題です。そして、解決した（嫌な）ハックは、CSSでinput [type = file]をかなり大きくし、alpha = 0にして、目的のUI要素の上に配置することだけです。

要するに、あなたはユーザーに気づかずに醜い「閲覧」ボタンをクリックさせているのです。

2
Engin

タグを追加してみてくださいenctype="multipart/form-data"をform要素に追加します。

0
Rodrigo Da Silva Guerra