jQuery trigger uploadify click event not working in firefox FF

I want to select an option on a drop down box and for this to trigger the uploadify available to jQuery which lets you upload a file.

My solution works in IE7 but not FF.

When you change the drop down it should show a window to browse for a file to upload. In FF nothing appears. In IE everything works.

JS is enabled in FF, if I insert alert messages it gets to the point of triggering the click on the input button.

<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'         : '../开发者_如何学C../../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>

According to this question it's not possible to trigger a click on a file input by design (due to security issues). While it does work in Chrome, I had no luck with this code on Firefox (and Opera as well) either.

<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>

Why do you need to trigger the file input with a link? If it's due to the limited styling that can be applied to the input, this article was mentioned on the other question.

Besides, possibly not related, but the Uploadify documentation says, you need to give the file input a unique ID. Yours only has a class.

Every element that Uploadify is applied to MUST have a unique ID attribute. You can reference elements via class, but each element must have a unique ID.

This is not possible in Firefox. However, take a look at the neat workaround given by Ramas in response to the same question here:

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

Sorry, IGNORE THAT it doesn't do what you want!

HERE IS WHAT I WOULD DO in this case:

replace your line of code that says:

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

by:

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

This will cause the INPUT element to flash (you could modify it to flash a couple of times) and it will receive focus, which highlights it in Firefox by changing its colour. In that way (provided it is close to the SELECT box), the user will see that he needs to press the "BROWSE" button of the INPUT element. I know this isn't perfect, but it is a workable fudge.

See an example at:

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

Regards Neil