Xpages 引导上传控制 [英] Xpages Bootstrap Upload Control

问题描述

我需要在我的应用程序中包含一个 Bootstrap 风格的文件上传控件.文件附件将存储在名为附件"的富文本字段中的文档中.使用 Java 保存字段.

我查看了下面列出的网站以及 Oliver Busse 所做的网站，但我现在找不到他的链接.

我最终想要一个自定义控件.

我已将 bootstrapfileinput4 文件夹添加到我的 WebContent 文件夹中.

当我运行以下 Xpage 代码时，出现错误.

Xpage 代码:

<xp:this.data><xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument></xp:this.data><xp:this.resources><xp:script src="/jQueryXSnippet.js" clientSide="true"></xp:script></xp:this.resources><script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script><link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css"/><xp:scriptBlock id="scriptBlockInitFile"><xp:this.value><![CDATA[$(文件).准备好(功能() {$('input[type=file]').fileinput({预览文件类型:图像"，browseClass: "btn btn-primary",浏览标签:浏览"，浏览图标:'<i class="glyphicon glyphicon-plus"></i>',removeClass: "btn btn-danger",removeLabel: "删除",removeIcon: '<i class="glyphicon glyphicon-trash"></i>',uploadClass: "btn btn-info",uploadLabel: "上传",上传图标:'<i class="glyphicon glyphicon-upload"></i>',});});]]></xp:this.value></xp:scriptBlock><xc:ccLayoutBootstrap><xp:this.facets><xp:panel xp:key="facetMiddle"><xp:br></xp:br><div class="page-header"><h1>文件输入<xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap FileInput Plugin</small>

<xp:fileUpload id="fileUpload1"value="#{document1.fileAttachment}"><xp:this.attrs><xp:attr name="accept" value="image/*"/></xp:this.attrs></xp:fileUpload><xp:br></xp:br><xp:fileDownload rows="30" id="fileDownload1"displayLastModified="true" value="#{document1.fileAttachment}"hideWhen="true" allowDelete="true"></xp:fileDownload><xp:button value="保存文档" id="button1" styleClass="btn btn-primary"><xp:eventHandler event="onclick" submit="true" refreshMode="complete"><xp:this.action><xp:actionGroup><xp:saveDocument></xp:saveDocument><xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage></xp:actionGroup></xp:this.action></xp:eventHandler></xp:button><xp:br></xp:br></xp:面板></xp:this.facets></xc:ccLayoutBootstrap></xp:view>

我使用过的链接:

XPages 文件上传组件的引导程序 UI

XPages 中的引导程序:使用新的XPage 第一部分中的 Bootstrap Fileinput 插件

解决方案

我猜是 AMD 加载程序问题.检查 fileinput.js 是否使用 AMD，如果是，则从 js 文件中删除该部分(例如，参见 this answer).

I need to include a Bootstrap style file upload control in my application. The file attachments will be stored in a document in a richtextfield called "attachments". Using Java to save fields.

I have looked at the web sites listed below as well as one that Oliver Busse did, but I cannot find his link now.

I would like a custom control eventually.

I have added the bootstrapfileinput4 folder to my WebContent folder.

When I run the following Xpage code I get an error.

Xpage code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/jQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="page-header">
<h1>
FileInput
<xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap FileInput Plugin</small>
</h1>
</div>    
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>
<xp:br></xp:br>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="true" value="#{document1.fileAttachment}"
hideWhen="true" allowDelete="true">
</xp:fileDownload>    
<xp:button value="Save Document" id="button1" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument></xp:saveDocument>
<xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Links that I have used:

Bootstrap UI for XPages File Upload component

Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I

解决方案

I guess it's an AMD loader issue. Check if fileinput.js uses AMD and if so then remove that part from the js file (see this answer for instance).

这篇关于Xpages 引导上传控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！