检查p:fileUpload组件是否包含任何要上传的文件,以更改背景
Check if p:fileUpload component contains any file to upload, to change background
我使用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);
相关文章:
- 如何播放部分音频文件
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 在 css 文件 href Javascript 中更改 css 类背景
- 浏览器找不到背景图像的文件
- 在网站的JS文件中添加背景图像
- 检查p:fileUpload组件是否包含任何要上传的文件,以更改背景
- 从php文件生成背景图像
- 如何在javascript中扩展画布图像's背景并转换为文件对象
- 使用JQuery设置css文件主体背景url
- 用javascript文件改变Internet站点的背景
- 设置背景图片与大小和不重复从文件夹中的随机图像
- 在输入文件中更改DIV背景为jpg
- 从文件阅读器设置背景图片样式
- Angular-如何在文件夹中随机选择一个图像来设置背景
- 包括JavaScript文件会破坏我的背景颜色
- 更改在 和 HTML 对象的背景处设置的 SVG 文件的颜色
- 将aspx文件放在背景图像中,如imsrc
- 背景图像路径不工作在css文件使用gulp js
- 背景文件未开始禁用