Question

我有一个JSF表单需要通过图标点击上传文件（即没有显示文件上传组件的文本字段/浏览按钮）。

是否可以通过其他组件类型触发文件打开对话框并上传上传组件的功能？

Answer 1

不，文件上传对话框作为安全功能几乎不可更改。

Answer 2

我认为没有任何其他“现成”组件可用于触发文件打开对话框（毕竟，这是由渲染器写的<input type=file>的结果）。

但是，如果您愿意开发自己的渲染器，它可以同时写入<input>和您的图标<img>（一个接一个）。给<input>一个使用绝对定位的css类将它放在<img>之上，并将它的不透明度降低到0（你也可以将光标设置为'指针'）。

现在，当用户点击图标时，他们也会点击隐藏的输入，弹出对话框。

（现在我想到了，我几乎是肯定的，你可以这样做，而无需编写自己的渲染器，只需将相同类型的css应用到现成的组件......）

Answer 3

使用HTML5，有一种新方法可以使用bootstrap为css设置样式，并用glyphicon替换image。

＆＃13;

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  cursor: inherit;
  display: block;
  width:32px;
  font-size:24pt;
  height:12px;
}

＆＃13;

<html>
  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
    <form>
      <span class="btn btn-default btn-file btn-lg">
        <span class="glyphicon glyphicon-upload"> </span> <input type="file">
      </span>
    </form>
  </body>
</html>

＆＃13;

JSF上传组件：备用触发

3 个答案: