html - jquery not firing for button event? -

i have situation want display graphical button user click initiate file upload.

i've created normal file upload input this:

<input style="display:none;" id="file" type="file" name="file">

note it's set display:none can "overlay" graphical button.

then created input of type="image" actual image button people click on. appears, intended, overlaying hidden file upload button be.

<input id="uploadbutton" type="image" src="images/choosefile-button.png" style="width:256px;height:57px;" />

now i'm using jquery script documented in this video handle click event , pass real, hidden file upload button execution of file selection dialog.

<script>     $(document).ready(function () {         var intervalfunc = function () {                                                        $('#file').html($('#file').val());         );         $('#uploadbutton').on('click', function() {         $('#file').click();         setinterval(intervalfunc, 1);         return false;         });     }); </script> 

the problem when click graphical button, file upload dialog doesn't appear. happens url changes adding x/y coordinate parameters of click occurred on image button. i've checked jquery linked in file, , is. idea whether i'm trying work? have adapt script detect proper x/y value range button , trigger click on underlying, hidden real button?

appear return expected results @ stacksnippets, when remove syntax error @ ); following $('#file').html($('#file').val()) note, not purpose of including setinterval ? input element not have .innerhtml

    $(document).ready(function() {        $("#uploadbutton").on("click", function() {          $("#file").click();        });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>  <input id="uploadbutton" type="image" src="http://lorempixel.com/50/50/technics" style="width:256px;height:57px;" />  <input style="display:none;" id="file" type="file" name="file">