2011-02-08 9 views
0

ドロップダウンボックスでオプションを選択し、ファイルをアップロードできるjQueryにアップロード可能なアップロードをトリガーする。jQueryトリガーuploadifyクリックイベントがfirefoxで機能していないFF

私のソリューションはIE7では動作しますが、FFでは動作しません。

ドロップダウンを変更すると、アップロードするファイルを参照するウィンドウが表示されます。 FFでは何も表示されません。 IEではすべてが動作します。

JSがFFで有効になっている場合、アラートメッセージを挿入すると、入力ボタンのクリックをトリガするポイントに到達します。

<select class="selectLogoTop" name="selectLogoTop"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
</select> 

<input class="fileupload1" type="file" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fileupload1').uploadify({ 
     'uploader'  : '../../../admin/uploadFileResources/uploadify.swf', 
     'script'   : '../../../admin/uploadFileResources/upload.cfm', 
     'cancelImg'  : '../../../admin/uploadFileResources/cancel.png', 
     'folder'   : '../../../upload_BE/offers/htmlfiles/5953/images/', 
     'multi'   : true 
     }); 

     $('.selectLogoTop').change(function(){ 
     $('.fileupload1').trigger("click"); 
     }); 
    }); 
</script> 
+0

。ポップアップウィンドウとしてカウントされるファイル入力のクリックをサポートし、onchangeイベントは有効なポップアップイベントとしてカウントされません。 – Neil

答えて

1

this questionによれば、(セキュリティ上の問題に)設計により、ファイル入力のクリックをトリガすることはできません。それはクロームで動作しますが、私はこのコードをFirefox(そしてOperaも同様)上で運ぶことはできませんでした。

<select class="selectLogoTop" name="selectLogoTop"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
</select> 

<input class="fileupload1" type="file" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.selectLogoTop').change(function(){ 
     $('.fileupload1').trigger("click"); 
     }); 
    }); 
</script> 

リンクでファイル入力をトリガーする必要があるのはなぜですか?それが入力に適用できる限定されたスタイリングのためであれば、もう一つの質問でthis articleが言及されました。

さらに、関連性がないかもしれないが、Uploadifyのドキュメントによれば、ファイル入力に固有のIDを与える必要があります。あなたにはクラスしかありません。

Uploadifyが がユニークID 属性を持たなければならないに適用されていることをすべての要素。クラスによって要素 を参照できますが、各要素には の一意のIDが必要です。

0

これはFirefoxでは不可能です。しかし、ここでは同じ質問に応じてRamasで与えきちんと回避策を見てみましょう:

In JavaScript can I make a "click" event fire programmatically for a file input element?

申し訳ありませんが、それはあなたがやりたいしないことIGNORE! HERE

は、私がこのような場合にはどうなるのかIS:

$('.fileupload1').fadeOut(300).delay(100).fadeIn(300, function(){$(this).focus().trigger("click")}); 

このフラッシュへのINPUT要素が発生します。

$('.fileupload1').trigger("click"); 

によって:

は言うコードのあなたの行を置き換えます(あなたは数回点滅するように変更することができます)、色を変えることでFirefoxで強調表示するフォーカスを受け取ります。このようにして(SELECTボックスの近くにある場合)、ユーザーはINPUT要素の「BROWSE」ボタンを押す必要があることがわかります。私はこれが完璧ではないことを知っていますが、それは実行可能なファッジです。

で例を参照してください:

http://www.jsfiddle.net/elusien/6XrSS/2/

よろしくFirefoxの4が、 ニール

関連する問題