Question

我想使用以下代码设置文件上传表单的样式：

<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只是不会激发。

任何想法或解决方法？请与我分享！谢谢！

Answer 1

在我的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/

具有自定义样式的Html5文件上传表单无法使用ie10触发提交按钮

1 个答案: