自定义样式的Html5文件上传表单可以使用ie10触发提交按钮

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

本文关键字：ie10 按钮 提交 可以使 表单 样式 Html5 文件 自定义      更新时间：2023-09-26

我想用下面的代码样式化文件上传表单:

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

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

有什么想法或解决方法吗?请与我分享!谢谢!

在我的IE10上，它确实提交，但只有在第二次点击提交按钮之后。如果您使用常规输入文件而不是触发事件的文本，它可以工作(至少对我来说是这样)，但我不知道这是否适合您。

更新:

经过一番研究，我找到了一个可能适合你问题的解决方案:

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

相关文章：