javascript - 检查 p :fileUpload component contains any file to upload, 是否改变背景

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 - 带计时器的自定义事件(挑剔但有效 - 参见:Create a jQuery special event for content changed):

$('.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 - 使用 Mutation Observer :

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);