CODEWITHSUNDEEP
jqueryeventsfile-uploadclick
dr jerry
dr jerry

Reputation: 10026

jquery: firing click() on input:file?

I'm currently trying to restyle (eclipse) a fileupload element on my website with this reference. All well and the result is promising, when I put the fileupload element below my new alternative image (as instructed on afore mentioned tutorial). Now I want to place the fileinput element somewhere else and bind a click function on the image to a click on the fileinput element to fire a file browser dialog.

Alas the usual $('input:file').click() or $('input:file').trigger('click') is not working.

I'm also interested in other ways to fire a file dialog, without a file upload element (it is only for javascript processing, no upload to the server).

Oh it does not need to work on any version of IE.

Upvotes: 0

Views: 18159

Answers (3)

Shamim
Shamim

Reputation: 1

<div class="imageUploadInput">
    <img id="uploadImage" src="images/camera_icon.png" />
    <input type="file" name="thumb" id="uploadImageInput" />
</div>

jQuery:

$('#uploadImage').livequery("click",function(){
    $('#uploadImageInput').trigger('click');
});

or

$('#uploadImage').click(function(){
   $('#uploadImageInput').trigger('click');
});

Upvotes: 0

Shef
Shef

Reputation: 45599

Missing a quote on both your code samples, try $('input:file').trigger('click') However, as far as I know, it's not possible to do this, at least this way. It's by design that way, on purpose, for security issues.

You can try to do it by tracking mouse movement and move the hidden file input on top of the new image or whatever you will use to style the input.

Upvotes: 5

Joshua - Pendo
Joshua - Pendo

Reputation: 4371

How are you doing it right now, can you give us some more code? Also try adding a unique ID to the file input and the field you want to trigger. For example:

<span id="browse">Click here to choose a file</span>
<input type="file" id="file" />

Then try doing:

$('#browse').bind('click', function(e) {
  $('#file').click();
});

Upvotes: 3

Related Questions