simulating a click on a <input type=“file” /> jQuery, Opera

i have form with display none and input type file in it, I also made ​​a button. when you click on it should open download dialog box. This combination works in all browsers except Opera. Begins to work if to remove display: none;

<form id="imageform" method="post" enctype="multipart/form-data" action='' style="display: none;">
    <input type="file" name="photoimg" id="photoimg" />
<input type="button" id="upload" value="upload">


$('#upload').on("click", function () {

Please explain, how to avoid this.


It would be better if you use visibility: hidden instead of display:none

or you can try with pure CSS. for example:

#photoimg {
   left: -99999px


#photoimg {
   z-index: -999


#photoimg {
   width: 0px

or something like that

read this article. It's Opera bug.

Instead of making the file input element display: none you can do this:

<div style="width:0;height:0;overflow:hidden;">
    <form id="imageform" method="post" enctype="multipart/form-data" action="">
        <input type="file" name="photoimg" id="photoimg" accept="image/*"
           onchange="document.getElementById('imageform').submit();" />
<button id="upload" onclick="document.getElementById('photoimg').click();">

Need Your Help

Multiple GET or POST variables 404's wordpress pages (numeric permalinks)

php wordpress get http-status-code-404

I am developing a live-action tag game (called DeTag) that uses a web interface for reporting kills. When a user wants to report a tag they go to a page to confirm who and when they tagged, then ac...

I need to resize my search bar based on the window resizing and I need make a function for the search bar resizing code

javascript jquery

I want to using the code that gets the screen size with the code that resizes the search bar together. At the moment all its doing is resizing the search bar on the biggest resolution. Here's a lin...