1

I want to show the file dialog once the page is loaded. I tried using JS to trigger the click event on the file input in jQuery document ready event. But this approach only works in IE11, it doesn't work in Chrome (41.0.2272.118). How can I make it work in Chrome?

Here is my code which doesn't work in Chrome but work in IE:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body >
    <input type="file" id="a" />
    <script>
        $(document).ready(function () {
            Go();
        });

        function Go() {
            var input = $('input');
            
            input.click();
            console.log('Gooooooooooooooo');
        }
    </script>
</body>
</html>
Layne Lin
  • 41
  • 5
  • You cannot, most browsers won't allow you. The file upload dialog can only be displayed as a result of the user actually clicking (or focus -> enter) on a file upload input. – Sergiu Paraschiv Apr 06 '15 at 14:56

2 Answers2

1

IE will allow you to trigger a .click event on a type='file', but most other browsers will not, for security reasons. However, there is a solution that might work for you.

Community
  • 1
  • 1
william.taylor.09
  • 2,145
  • 10
  • 17
  • I know how to open the file dialog by programmatic triggering the click event. My problem here is this way doesn't work once the page is loaded. – Layne Lin Apr 06 '15 at 15:46
  • I found a solution from another stack overflow page [that should work fine](http://stackoverflow.com/questions/12134014/how-can-i-programmatically-open-the-file-picker-with-javascript). Accomanying JS fiddle here: http://jsfiddle.net/fEBFp/1/ – william.taylor.09 Apr 06 '15 at 16:02
  • Thanks for the help. But I want the file dialog open automatically after the page is loaded without clicking anything. – Layne Lin Apr 06 '15 at 20:25
0

No straight ways of triggering it with onload().
Onload is only supported by the <input type = "image"> tag. See here.

+1 @william.taylor.09's proposition.

Ali Hammoud
  • 325
  • 2
  • 12
  • I know how to open the file dialog by programmatic triggering the click event. My problem here is this way doesn't work once the page is loaded. I'm trying something like $(document).ready(function(){ // trigger the click event on file input.}); but it doesn't work. – Layne Lin Apr 06 '15 at 15:47