检查p:fileUpload组件是否包含任何要上传的文件，以更改背景

Check if p:fileUpload component contains any file to upload, to change background

本文关键字：文件 背景 fileUpload 组件 是否 包含任 检查      更新时间：2023-09-26

我使用PrimeFacesp:fileUpload（PrimeFaces 3.5）上传各种文件。我想检查字段是否包含任何文件，其中显示了已选择的文件并准备上传。取决于它改变背景。也许使用javascript？

<p:fileUpload
    id="fileUploadComponent"
    mode="advanced"
    dragDropSupport="true"
    uploadLabel="Process"
    label="Choose files"
    widgetVar="fileUploadWidget"
    multiple="true"
    styleClass=""
    onstart="setUploadFilesCount()"
    allowTypes="/('.|'/)(gif|jpg|jpeg|png|pdf|odt|ods|doc|docx|csv|xlsx|xls|txt)$/"
    fileUploadListener="#{documentsBean.uploadAll}" >
</p:fileUpload>

此外，fileUpload具有dragDropSupport true，因此每当文件被拖动时&droped我想改变背景以及当我选择带按钮的文件时。

那么我该如何设置上传字段的styleClass。现在我有这样的：

div.fileupload-content.ui-widget-content.ui-corner-bottom {
   min-height: 450px;
   background: url("../resources/images/uploadBackground2.png") 0 0 no-repeat !important;
   background-position: center center !important;}

请问我怎样才能做到？

非常感谢。

您可以在生成的文件列表上附加一个事件。

Primefaces的FileUpload与您的配置一起生成这个HTML:

<div class="ui-fileupload-content ui-widget-content ui-corner-bottom">
    <div class="ui-messages ui-widget ui-helper-hidden" style="display: none;">
        <div class="ui-messages-error ui-corner-all">
            <a class="ui-messages-close" href="#"><span class="ui-icon ui-icon-close"></span></a><span class="ui-messages-error-icon"></span>
            <ul>
                <!-- HERE ARE YOUR FILES WITH "ERROR" FLAG (<li></li>) -->
            </ul>
       </div>
    </div>
    <table class="ui-fileupload-files">
         <tbody>
              <!-- HERE ARE YOUR FILES WITH "OK" FLAG (<tr></tr>) --> 
         </tbody>
    </table>
</div>

因此，您只需要将一个事件附加到这两个元素，这两个元件可以检测HTML更改，并触发自定义函数。此函数必须检查节点计数或HTML内容，并采取相应措施（添加/删除CSS类）。

为此，有几种方法：

1-DOM事件（不推荐使用，而非跨浏览器-请参阅：http://www.w3.org/TR/DOM-Level-3-Events/)：

$('.myElement').bind('DOMNodeInserted DOMNodeRemoved', function() {
    // Your code here
});

2-带定时器的自定义事件（Fastidious但有效-请参阅：为更改的内容创建一个jQuery特殊事件）：

$('.myElement').bind('contentchange', function() {
    // Your code here
});
(function(){
    var interval;
    jQuery.event.special.contentchange = {
        setup: function(){
        var self = this,
            $this = $(this),
            $originalContent = $this.text();
            interval = setInterval(function(){
                if($originalContent != $this.text()) {
                    $originalContent = $this.text();
                    jQuery.event.handle.call(self, {type:'contentchange'});
                }
            },100);
        },
        teardown: function(){
            clearInterval(interval);
        }
    };
})();

3-与前面相同，但声明了一个jQuery方法（请参见：http://james.padolsey.com/javascript/monitoring-dom-properties/)

4-使用突变观察者：

mainArea = document.querySelector(".myElement");
MutationObserver = window.MutationObserver;
DocumentObserver = new MutationObserver(function() {
   // Your code here
});
DocumentObserverConfig = {attributes: true, childList: true, characterData: true, subtree: true};
DocumentObserver.observe(mainArea, DocumentObserverConfig);
相关文章：