6

I have a input, type of file, withdisplay:none and there is a button.after clicking the button, the input's event should be fired. In IE, Chrome and Firefox it works but not in Safari!

var elem=$('<input name="fileUpload" type="file"/>');    if($("#ajxAttachFiles").length==0){        elem.prependTo(".ChProgress");    }$("#ajxAttachFiles").click();

there is no error in console. I triedthis but nothing.

$(document).ready(function(){        $("#btn").on('click',function(){          $("#ajxAttachFiles")[0].click();        });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><input type="file"><button type="button">Click me!</button>

askedOct 22, 2014 at 6:05
Super Hornet's user avatar
7
  • Which build of Safari are you using?CommentedOct 22, 2014 at 6:09
  • @Sprottenwels 5.1.7(7534.57.2)CommentedOct 22, 2014 at 6:10
  • Does it work if you don't hide it withdisplay: none?CommentedOct 22, 2014 at 6:10
  • @dfsq I just tested. no differenceCommentedOct 22, 2014 at 6:13
  • 2
    Click event in safari on input type file will work if it is not hidden and click() is called out of user interaction (e.g inside onclick handler etc).CommentedOct 22, 2014 at 6:31

2 Answers2

4

The issue is completely solved. The point is element ofinput[type=file] must not bedisplay: none. Look at sample below:

function click(el) {  // Simulate click on the element.  var evt = document.createEvent('Event');  evt.initEvent('click', true, true);  el.dispatchEvent(evt);}document.querySelector('#selectFile').addEventListener('click', function(e) {  var fileInput = document.querySelector('#inputFile');  //click(fileInput); // Simulate the click with a custom event.  fileInput.click(); // Or, use the native click() of the file input.}, false);
<input type="file" name="file"><button>Select</button>

meyi's user avatar
meyi
8,2521 gold badge17 silver badges29 bronze badges
answeredOct 25, 2014 at 7:55
Super Hornet's user avatar
Sign up to request clarification or add additional context in comments.

1 Comment

The visibility is not the reason this works but the fact that it's being invoked from a click event.
1

Trigger the click event on the DOM element rather than the jQuery object. That should work in all browsers.

 $('#ajxAttachFiles')[0].click();

Or:

document.getElementById('ajxAttachFiles').dispatchEvent( new Event('click') );//for IE < 9 use microsoft's document.createEventObject

var elem=$('<input name="fileUpload" type="file"/>');    if($("#ajxAttachFiles").length==0){        elem.prependTo(".ChProgress");    }$("#ajxAttachFiles").on('click',function() {  alert( 'click triggered' );});$("#ajxAttachFiles")[0].click();//an alternative:var event = new Event('click');document.getElementById('ajxAttachFiles').dispatchEvent(event);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>Will be added here</div>

answeredOct 22, 2014 at 6:23
PeterKA's user avatar

3 Comments

You probably have duplicate IDs. Be sure not to leave out the [0]. Would you please create a demo.
It just shows the alert and doesn't showbrowse file window

Your Answer

Sign up orlog in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

By clicking “Post Your Answer”, you agree to ourterms of service and acknowledge you have read ourprivacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.