How to call file input click with jquery?

Question

i want to call click event of file input only by jquery, but when i use this below code, it doesn't work:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            setTimeout(function () {
                $('#file').trigger('click');
            }, 2000);
        });
    </script>
</head>
<body>
    <input id="file" name="file" type="file" />
</body>
</html>

NOTE

I want to do this only with jquery or javascript.

possible duplicate of [Programmatically trigger "select file" dialog box](http://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box) — technophobia, May 12 '15 at 18:56
A very important note here regarding triggering the file input programatically: http://stackoverflow.com/a/21583865/984275 — technophobia, May 12 '15 at 18:57

Victor · Answer 1 · 2015-05-12T18:51:48.260

9

Just do it!

With jQuery:

$('#file').click();

Pure javascript:

var fileInput = document.getElementById('file');
if(fileInput) {
     fileInput.click();
}

$(document).ready(function() {
  $('#btn').click(function() {
    // Will Work!!!!
    $('#fileInput').click();
  });
  // Will not Work
  $('#fileInput').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input type="file" id="fileInput" />
<br/>
<br/>
<button id="btn">Click</button>

Your problem is that I need to call the click event from a user action. Take a look in the example. The click called inside the ready event doesn't work, because is not a user event. But the same code from click work.

edited May 12 '15 at 18:51

answered May 12 '15 at 18:44

Victor

8,309
14
80
129

@RasoolGhafari what isn't working for you what error message are u getting if any? – brso05 May 12 '15 at 18:49
@RasoolGhafari I think it must be triggered by a user event like a user clicking another button...I don't think it will work in `setInterval()`. – brso05 May 12 '15 at 18:51
@Victor, i know that way, but i want to trigger click without user action – Rasool Ghafari May 12 '15 at 18:52
1

I fixed the example. It's a security issue. – Victor May 12 '15 at 18:53
Without an user action I don't know if you can do it. With a delay, take a look in this example: http://jsfiddle.net/eyedean/1bw357kw/ – Victor May 12 '15 at 19:12

How to call file input click with jquery?

1 Answers1