3

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

<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在我单击提交按钮时不会触发。

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

4

1 回答 1

2

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

于 2013-04-26T19:08:45.393 回答