I have tried this, (note that I am using jQuery):

function HandleFileButtonClick()
{
    1. //$('#filesel').click();
    2. //document.replyform.image.click();
}

HTML:

<input type="file" id="filesel" name="image" style="display: none;"  /> 
<a href="#"><img src="<?=TF?>/img/att.png" style="height:20px;" onclick="HandleFileButtonClick();" /></a>

neither are working in Google Chrome Browser... any ideas, or a replacement for jQuery click()

I have tried this, (note that I am using jQuery):

function HandleFileButtonClick()
{
    1. //$('#filesel').click();
    2. //document.replyform.image.click();
}

HTML:

<input type="file" id="filesel" name="image" style="display: none;"  /> 
<a href="#"><img src="<?=TF?>/img/att.png" style="height:20px;" onclick="HandleFileButtonClick();" /></a>

neither are working in Google Chrome Browser... any ideas, or a replacement for jQuery click()

• javascript
• jquery
• html
• click

• Also see Chrome and Firefox file upload browse bug. – alex Commented May 29, 2011 at 11:39

5 Answers 5

I am here to help other with a similar problem. I try use .trigger('click') to start a click event into a FILE field that was if style='display:none' and discovered that Chrome diferent from Mozila Firefox and IE don´t let it work with this style. The solution is don´t use display:none and use instead of it style='width:0px;height:0px'. The result is the same, the FILE field be hidden and you can use another button to start its works even in Chrome this time.

Best Regards peeps.

Sounds like you are hitting a security wall designed to only allow the file upload box to be triggered by the user.

You could try absolutely positioning the browser's browse button over your link, and then setting its opacity to 0.

Dont't use removeClass or addClass, or width:1px for the real file inputs. Just use simple CSS: visiblity: hidden; position: absolute;

This will fix all your problems in this case!

What are you trying to acplish?

Maybe this is what you want:

function HandleFileButtonClick()
{
    ...
}

$('#filesel').click(HandleFileButtonClick);

Note:

If you are trying to trigger mouse click event by calling click function of JQuery, you are totally out of track. This cannot be achieved.

instead of using CSS fixes to hide the file field offscreen/out of sight without the use of display:none, I use the following strategy:

The CSS:

.hidden {display:none}

The HTML

<input type="file" name="file-upload" id="file-upload" class="hidden" /><button>Upload</button>

in prototype:

$('file-upload').removeClassName('hidden').click();$('file-upload').addClassName('hidden');

in jQuery:

$('#file-upload').removeClass('hidden').click().addClass('hidden');

This beats wrestling with different browser styles in my opinion. Works for me!