Html5 file upload form with customized style can't fire submit button using ie10

Question

I want to styling the file upload form with code below:

<form method='POST' enctype='multipart/form-data' action='file.php'>
<fieldset>
    <legend>Please choose file</legend>
    <input type="file" name="upfile" style="display:none">
    <div class="input-append">
        <input id="filepath" class="input-large" type="text">
        <a class="btn" onclick="javascript:$('input[name=upfile]').click();">Browse</a>
    </div>
    <div>
        <input id="submitBtn" class="btn btn-primary" type="submit" value="Upload">
    </div>
</fieldset>
</form>
<script type="text/javascript">
$('input[name=upfile]').change(function(){
$('#filepath').val($(this).val());
});
</script>

It works perfectly on Chorme/Firefox/Safari but IE 10 it just not fire when I click the submit button.

Any ideas or workaround? Please share with me! thanks!

Answer 1

On my IE10 it does submit, but only after the 2nd click on the submit button. If you use the regular input file instead of a text that will trigger the event, it works (at least for me it did) but I dont know if that's an option for you.

UPDATE:

After some research, I found a solution that might fit your problem:

<style>
  #fileinput { position: absolute; left: -9999em; }
  #link { color: #2a9dcf; font-size: 16px; }
  #link:hover { text-decoration: underline; cursor: pointer; }  
</style>

<form id="uploader-form" method='POST' enctype='multipart/form-data' action='file.php'> 
  <fieldset>
    <legend>Please choose file</legend>
    <div class="input-append">
      <input id="filepath" class="input-large" type="text">
      <input type="file" id="fileinput" />
      <label for="fileinput" id="link" class="trigger-file-input">Browse</label>
    </div>
    <div>
      <input id="submitBtn" class="btn btn-primary" type="submit" value="Upload">
    </div> 
  </fieldset> 
</form>

<script type="text/javascript">
// after the user selects the file they want to upload, submit the form
$('#fileinput').on("change", function() {
    $('#filepath').val($(this).val());
});


// mozilla won't focus a file input with the click of a corresponding
// label, but all other browsers do. if we detect mozilla, listen for
// the label click and send a click to the file input programmatically
if($.browser.mozilla) {
    $('.trigger-file-input').click(function() {
      $('#fileinput').click();                             
    });
}
</script> 

Refer to: http://jsfiddle.net/djibouti33/uP7A9/