Html5文件上传形式与自定义样式不能使用ie10提交按钮 [英] 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:

<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>

它在Chorme / Firefox / Safari上工作得很好，但IE 10只是 strong>当我点击提交按钮。

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!

推荐答案

在我的IE10它确实提交，但只有第二次点击提交按钮。如果你使用常规输入文件而不是触发事件的文本，它会工作（至少对我来说是这样），但我不知道这是否是一个选项。

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.

更新：

经过一番研究，我发现一个解决方案可能符合您的问题：

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> 

请参阅： http://jsfiddle.net/djibouti33/uP7A9/

这篇关于Html5文件上传形式与自定义样式不能使用ie10提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！