CODEWITHSUNDEEP
javascriptjqueryhtmlclick
Andrei Stanca
Andrei Stanca

Reputation: 908

javascript - click() doesn`t work in chrome

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

Upvotes: 4

Views: 16169

Answers (5)

Svetoslav Genov
Svetoslav Genov

Reputation: 366

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!

Upvotes: 2

Seth Malaki
Seth Malaki

Reputation: 4486

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!

Upvotes: 1

Tiago
Tiago

Reputation: 51

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.

Upvotes: 5

ssapkota
ssapkota

Reputation: 3302

What are you trying to accomplish?

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.

Upvotes: 1

alex
alex

Reputation: 490153

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.

Upvotes: 4

Related Questions