我有一个 JSF 表单,需要通过单击图标来上传文件(即不显示文件上传组件的文本字段/浏览按钮)。
是否可以通过其他组件类型触发上传组件的文件打开对话框和上传功能?
我有一个 JSF 表单,需要通过单击图标来上传文件(即不显示文件上传组件的文本字段/浏览按钮)。
是否可以通过其他组件类型触发上传组件的文件打开对话框和上传功能?
我认为没有任何其他“现成的”组件可以用来触发文件打开对话框(毕竟,这<input type=file>
是由渲染器编写的结果)。
但是,如果您愿意开发自己的渲染器,它可以同时编写<input>
图标和图标<img>
(一个接一个)。给<input>
一个使用绝对定位的 css 类将其放在顶部<img>
并将其不透明度降低到 0(您也可以将光标设置为“指针”)。
现在,当用户点击icon时,他们也点击了不可见的输入,这会弹出你的对话框。
(现在我想起来了,我几乎肯定你可以通过将相同类型的 css 应用于现成组件来实现这一点,而无需编写自己的渲染器......)
不,文件上传对话框作为一项安全功能几乎是不可更改的。
在 HTML5 中,有一种新方法可以使用引导程序设置 CSS 样式,并用字形图标替换图像。
.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;
}
<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>