4

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

Seth Malaki
  • 4,436
  • 23
  • 48
Andrei Stanca
  • 908
  • 2
  • 11
  • 26
  • Also see [Chrome and Firefox file upload browse bug](http://stackoverflow.com/questions/5812174/chrome-and-firefox-file-upload-browse-bug). – alex May 29 '11 at 11:39

5 Answers5

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.

Tiago
  • 51
  • 1
4

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.

alex
  • 479,566
  • 201
  • 878
  • 984
  • 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. – Morg. Apr 18 '12 at 16:08
2

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!

Svetoslav Genov
  • 346
  • 3
  • 5
1

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!

Seth Malaki
  • 4,436
  • 23
  • 48
1

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.

ssapkota
  • 3,262
  • 19
  • 30
  • 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); – Andrei Stanca May 29 '11 at 14:38
  • @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. – ssapkota May 29 '11 at 15:42
  • 1
    you can see here: http://api.jquery.com/click/ Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element. – Andrei Stanca May 30 '11 at 14:17