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

Question

我正在使用PrimeFaces p：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，因此无论何时拖放文件，我都想更改背景以及选择带按钮的文件时。

然后，如何设置上传字段的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;}    

请问如何实现？

非常感谢你。

Answer 1

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

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-带计时器的自定义事件（非常好用，但可以工作-请参阅： 为内容更改创建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);