Why click event for file browse window is not working?

Question

<input> for select images:

<input type="file" class="form-control forminputs files photoimg" multiple name="photoimg[]" placeholder="Choose 3 image files" accept="image/png,image/jpeg" id="photoimg" /> 

I am trying to select at least 3 images. If it is exceeded 3, then it alerts "please select 3" and again automatically opens file browse window.

Up to alert everything works fine but after that file browse window is not opening.

JS code:

$('#photoimg').change(function() {
    var files = this.files.length;
    if (files > 3)
    {
        alert("Please select 3 images only(png/jpg)");
        document.getElementById("photoimg").click();
    } 
});

tried with this.click() and $('#photoimg').click();.

 $('#photoimg').click(function() {
     alert("clicked");
     });

to test it click event was taken, click event was working but still file browse was not working. Why it is not working?

Answer 1

Here is the working demo
$('#photoimg').change(function() {
var files = this.files.length;
if (files != 3)
{
    alert("Please select 3 images only(png/jpg)");
    document.getElementById("photoimg").click();
} 
});

http://jsfiddle.net/silpa/4fbz5f1m/4/

Answer 2

You can't perform click event for file input because of security reasons. You can do that by creating custom element which behave like file input element.