1

Gmailのファイルアップロード機能を再作成しようとしています-デフォルトのファイル入力タイプを使用する代わりに-その要素を非表示にし、hrefを使用してデフォルトのコントロールのクリックをシミュレートしています。

その部分はすべてのブラウザーで機能していますが、ファイルコントロールのonchangeハンドルを使用して、ファイルのアップロードを開始します（一時フォームを送信/結果をiframeに投稿します）。問題は、ファイルを選択した後、コントロールがIEで空白に見えるが、FFとChromeでは正常に機能することです。IE8以降のみをサポートする必要があります。

最後に注意が必要な点が1つあります。これは既存のフォーム内で発生するため、jQueryを使用してドキュメントの下部にフォームを追加します。

<a id ="upper">Upload</a>

このjQueryを起動します

$("#upper").click(function() {
  $('#dynamic_files').click();
});

フォームを動的に追加する

      $().ready(function() {
            $('body').append('<form id="my_form" name="upload" action="/fil/upload"       
method="POST" enctype="multipart/form-data" target="my_iframe">
<iframe id="my_iframe" name="my_iframe" src="" style="display:block;"></iframe>  
<input type="file" name="files[resource_file]" id="dynamic_files"  
onChange="this.form.submit();" /></form>');
       });

また、IEでは、「ショートカット」リンクの代わりにデフォルトのファイルセレクターコントロールをクリックすると、このコードが機能することに注意してください。

4

1 に答える 1

0

これは IE 8 の制限です。Gmail はフラッシュを使用して、ファイル入力コントロールを使用して回避します。コントロールの不透明度を 0 に設定し、この例に示すようにボタンの上にオーバーレイすることで、偽装することができます。

http://www.quirksmode.org/dom/inputfile.html

また、これを抽象化してあなたから遠ざけることができる、事前に構築されたソリューションもたくさんあります。私が過去に使用したのは PLUpload です。

http://www.plupload.com/

于 2012-09-06T19:23:27.933 に答える