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

Question

在一个预先存在的项目上工作，我发现当点击输入元素后的空白时，fileupload 输入触发，延伸到它上面的几个标签，并在我的页面中结束，只有当它到达一对时<li> 个，其中包含表单元素。（如果这些列表项中有一个或更少，问题会持续到页面底部。）

我有一对 JSFiddles，其中包含我可以构建的最少示例。我完全不知道这里发生了什么。

带有一个列表项的示例，行为继续到 window 的底部：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 打开文件选择器。

Blueimp fileupload opens file picker when whitespace is clicked.

html

javascript

css

file-upload

blueimp