Trigger click event not working in IE10

Question

I need to add onclick event to an image so when I click on the image it will trigger the file open dialog. But it doesn't work in IE10.

$("#button").on("click",function(){
  $("#upload").trigger("click");
});

#upload{
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="button" src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" />

<input id="upload" type="file" >

*"But it don't work on ie 10"* - Does it work in other browsers? Do you get errors in the browser's console? Does anything happen at all? — nnnnnn, Jul 05 '15 at 11:50
In other browsers it work but on ie 10 when i click to image in dont do anything and no error in browser's console — yaibait, Jul 05 '15 at 12:55
can you try with `opacity:0.1`, input may not work because it's invisible. — Hacketo, Jul 06 '15 at 09:27

score 0 · Accepted Answer · answered Jul 06 '15 at 09:55

Ok, I tested this in the newest FF, Opera, Chrome, IE8, IE9, IE10, IE11. Its working everywhere.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" />
<img id="button" src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" />

jQuery:

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

$('input[type=file]').change(function() {
    $('input[type=text]').val($(this).val());
});

CSS:

input[type=file] {
    display: block;
    height: 0;
    width: 0;
}

Working DEMO

score -1 · Answer 2 · answered Jul 06 '15 at 09:52

-1

This should answer your question.

answered Jul 06 '15 at 09:52

zamber

938
8
25

Trigger click event not working in IE10

2 Answers2

Linked