CODEWITHSUNDEEP
javascriptjqueryhtmlfile-upload
Niraj Choubey
Niraj Choubey

Reputation: 4040

open file upload dialog on click

I have to open file upload dialog by clicking some other button i.e i am hiding file upload control(visibility:hidden) and on clicking of some other button i want to open that dialog. Below is the code which i am having:

<input type="file" style="visibility: hidden;" />

Below is the javascript:

$('#button').click(function() {
    $('input[type=file]').click();
});

It is working fine in Firefox 4 and IE8 but in chrome12 it is not working i.e the dialog is not being opened. Any idea why?

Upvotes: 23

Views: 53949

Answers (3)

Knaģis
Knaģis

Reputation: 21475

Tested today the simple code given in the question and the situation has changed:

  • IE9: works
  • Chrome23: works
  • Firefox15: works

There is just one catch - on IE the .click() is a blocking operation while on other browsers it is not.

Upvotes: 8

circusbred
circusbred

Reputation: 1240

In your example, your file input did not have an id, yet you are trying to reference it with #input. This works for me:

$('#button').click(function() {
    $('input[type=file]').click();
});

Upvotes: 5

gaRex
gaRex

Reputation: 4215

You should position input[file] just above your custom control. And then bind to it`s onclick.

Also make in it bigger font-size, as only this way you can increase it's height.

Upvotes: 0

Related Questions