input type file, trigger the popup by a button click only

Question

I have this file upload control:

Which has this markup:

<div class="controls">
    <input name="attachments[]"  id="attachment_control" runat="server" type="file" /><br />     
    <div id="fileuploads" runat="server"></div>
</div>

I want to somehow fix this control to have the popup shown only on the Browse button click. As it is now, anywhere you'll click in the control, the upload popup will be shown, but I want only when the user will click on the button, the popup to be shown.

How can I do this?

Answer 1

$("#nofile").click(function() {
      $("#fileuploads").click();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
     <label>File</lable>
     <input type="button" value="Upload" id="nofile"  width="30px"/>
     <input type="file" id="fileuploads" runat="server" style="display: none;" />
     </div>

This might help

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

<div class="controls">
 <label>File</lable>
 <input type="button" value="Upload" id="nofile"  width="30px"/>
 <input type="file" id="fileuploads" runat="server" style="display: none;" />
 </div>

  <script type="text/javascript">
  $("#nofile").click(function() {
  $("#fileuploads").click();
  });
  </script>