如何将事件添加到richfaces fileUpload“清除”答案

【问题标题】：how can I add event to richfaces fileUpload "on clear"如何将事件添加到richfaces fileUpload“清除”
【发布时间】：2010-03-01 07:46:08
【问题描述】：

richfaces fileUpload 组件上有清除、清除所有按钮。

<rich:fileUpload id="quoteFile" tabindex="10" listHeight="80" maxFilesQuantity="1" onuploadcanceled="" 
 clearControlLabel=""
 clearAllControlLabel=""
 acceptedTypes="xml"
 fileUploadListener="#{loadSaveQuotes.uploadListener}">     
 <a4j:support event="onuploadcanceled" action="#{loadSaveQuotes.clearUploadData}" reRender="footer"  />
</rich:fileUpload>

我只想：

1，删除这两个按钮，使最终用户无法点击它。因为我将 clearControlLabel 设置为“”，并将 clearAllControlLabel 设置为“”，但只有 clearControlLabel 被隐藏。仍然有清除所有控件显示为 [x] 按钮，我仍然单击它

2，如果我无法移除这些按钮，我该如何控制它们。就像在清除事件时添加一个事件侦听器。我添加了一个 a4j:support 事件，但是当我单击清除按钮时它不会触发。

非常感谢您的贡献。

【问题讨论】：

标签： file-upload richfaces

【解决方案1】：

添加一个 a4j:support for 'onclear' JavaScript 事件。代码不言自明：

<rich:fileUpload id="upload">
    <a4j:support event="onclear" reRender="upload"/>
</rich:fileUpload>

【讨论】：

【解决方案2】：

您可以通过 CSS 隐藏这些按钮，例如你可以给你的文件上传一个额外的类，比如

<rich:fileUpload styleClass="my-upload"> etc. </rich:fileUpload>

然后使用CSS Specificity 否决这个文件上传组件的外观：

.my-upload .rf-fu-btns-rgh, .my-upload .rf-fu-itm-rgh {
    display: none;
}

您可以选择比 RichFaces 中的原始选择器具有更高特异性的任何选择器组合。我发现拥有一个额外的类是最干净的解决方案，因为它允许我将“普通”和“修改”RichFaces 组件彼此相邻，只是它们的样式类有所不同。

您可以在RichFaces component documentation 或您最喜欢的网站检查工具中查找要更改的元素的 RichFaces 样式类。

【讨论】：

【解决方案3】：

我也有同样的要求。隐藏全部清除按钮和清除链接，但仅在文件提交上传时。我通过 JavaScript 用动态 css 解决了这个要求。下面是例子。

rich:fileUpload 控件

<rich:fileUpload id="excelUploader"
                fileUploadListener="#{uploadUIController.excelFileUploadListener}"
                acceptedTypes=".xls" 
                maxFilesQuantity="1" 
                noDuplicate="true"
                ontyperejected="Wrong file type selected !"
                serverErrorLabel="Invalid file type selected !" 
                listHeight="100px" 
                doneLabel="Excel Upload Completed !" 
                onfilesubmit="showHideClearLink()"
                styleClass="fileUploadClass"/>

文件顶部的Javascript代码...

<script type="text/javascript">
function showHideClearLink()
{
var styleSheet = document.createElement('style')
styleSheet.innerHTML = ".fileUploadClass .rf-fu-btns-rgh, .fileUploadClass .rf-fu-itm-rgh {display: none;}"; 
document.body.appendChild(styleSheet);
}

【讨论】：