Simulating a click on <input type = "file" / "> jQuery, Opera

Question

I have a form with a none display and an input type file in it, I also made a button. when you click on it, you should open the download dialog box. This combination works in all browsers except Opera. Starts working if you delete the display: none;

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

Jquery:

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

Please explain how to avoid this.

Answer 1

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

or you can try with pure CSS. eg:

 #photoimg { left: -99999px } 

or

 #photoimg { z-index: -999 } 

or

 #photoimg { width: 0px } 

or something like that

Answer 2

read this article. This is an Opera bug. http://my.opera.com/community/forums/topic.dml?id=1054112

Answer 3

Instead of creating a display: none file input element, 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();" /> </form> </div> <button id="upload" onclick="document.getElementById('photoimg').click();"> Upload</button>