Html5 File Upload Form With Customized Style Can't Fire Submit Button Using Ie10

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

Please choose

Solution 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><formid="uploader-form"method='POST'enctype='multipart/form-data'action='file.php'><fieldset><legend>Please choose file</legend><divclass="input-append"><inputid="filepath"class="input-large"type="text"><inputtype="file"id="fileinput" /><labelfor="fileinput"id="link"class="trigger-file-input">Browse</label></div><div><inputid="submitBtn"class="btn btn-primary"type="submit"value="Upload"></div></fieldset></form><scripttype="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 programmaticallyif($.browser.mozilla) {
    $('.trigger-file-input').click(function() {
      $('#fileinput').click();                             
    });
}
</script>

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