title: How to trigger click on input file element by clicking on another element
body: <p>I am using jQuery and Ajax on a button, to update the value of attribute "accept" on an input file upload element, then trigger click on it. But I can only do it on Firefox. On Chrome, the trigger click event doesn't work, and on IE8, it works but cannot upload the selected file. What should I do?
  This is my code in handleAjaxResponseSuccess function:</p>
  
  <pre><code>$('#inputFile').attr('accept', '.jpg, .png');
  $('#inputFile').click();
  //in Firefox and IE8, it shows a file dialog that allows choosing file to upload. But in Chrome, the file dialog does not appear, and in IE8, the selected file cannot be uploaded
  </code></pre>
  
  <p>My HTML code</p>
  
  <pre><code>&lt;button type="button" id="uploadBtn" onclick="getAcceptedExtension()"title="Upload" class=""&gt;&lt;/button&gt;
  &lt;input type="file" name="" id="inputFile" multiple="multiple"style="display: none;" &gt;
  </code></pre>