javascript - click() doesn`t work in chrome

Question

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

Solution 1

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.

Solution 2

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.

Solution 3

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!

Solution 4

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!

Solution 5

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.

View more solutions

Comments

[Andrei Stanca]

so why does it work in any other browser except chrome ?.. i`m not an expert of javascript/jquery but i think you are out of track... btw, function is called with onclick="" no need for $('#filesel').click(HandleFileButtonClick);

[ssapkota]

@Andrei, Really, Does it really trigger click event?, If so I would like to learn it. Can you point me to some link/doc where I can learn about it.

[Andrei Stanca]

you can see here: api.jquery.com/click Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

[Sophivorus]

Great solution, should get more attention !

[Sophivorus]

Also, I just found that by using visibility:hidden; Chrome DOES let it work (and Firefox, and Opera, and Safari, but didn't try with Explorer).

[Morg.]

Nope /. not a security wall, the click event works when it's not hidden. It's (i believe) an optimization feature, i.e. remove all listeners on display:none events, since they shouldn't be clicked from there.