Question

在预先存在的项目上工作时，我发现fileupload输入在单击input元素后的空格，延伸到其上方的几个标记，并在我的页面中仅在到达一对{时结束时触发{1}}包含表单元素。（如果这些列表项中只有一个或更少，则问题仍然存在于页面底部。）

我有一对JSFiddles，我可以构建最小的例子。我完全不知道这里发生了什么。

有一个列表项的示例，行为继续到窗口底部：https://jsfiddle.net/e980gzry/

有两个列表项的示例，行为在第一个列表项上方停止：https://jsfiddle.net/o76qd639/5/

之前是否有人遇到过这种情况，我怎么能解决这个问题呢？

Answer 1

如果您不介意使用javascript来触发文件浏览器，可以使用jquery执行以下操作：

$(function () {
  // whenever .fileinput-button is clicked, trigger a click on the input element
  $(".fileinput-button").on('click', function (e) {
    $("#fileupload").click();
  });
});

但如果您直接使用此功能，则需要将input移到.fileinput-button之外：

<div class='box-content'>
  <span class='fileinput-button' style='color: #008fd2; border-bottom: 1px solid #e0e2e5'>
      <i class='fa fa-upload'>
        <span>
          <i class="fa fa-fa-upload"></i> Add files...
        </span>
      </i>
  </span>
  <input id='fileupload' multiple='' name='files[]' type='file'>
</div>

简化css，删除.fileinput-button input定义：

.fileinput-button {
  display: block;
  cursor: pointer;
}

#fileupload {
  display: none;
}

See complete jsfiddle，在chrome和firefox中测试过。

顺便说一句，你看到的问题是浏览器不喜欢对输入元素进行完整的css控制。所以这只是一种解决方法。

单击空格时，Blueimp fileupload会打开文件选择器。

1 个答案: