JSF-PrimeFaces实现图片的上传、下载、删除、预览

一、前言
培训班出来,第一份工作是没有学过的jsf框架,开贴记录学习过程,和大家分享。其实自己也是一知半解,边实现边学习。下面使用的组件都是PrimeFaces的。
JSF-PrimeFaces实现图片的上传、下载、删除、预览_第1张图片
二、图片上传组件、逻辑

<p:fileUpload fileUploadListener="#{rebatePolicyAction.handleImageUpload}" mode="advanced" dragDropSupport="false"
                       uploadLabel="上传" cancelLabel="取消" label="浏览" invalidFileMessage="请上传gif、jpe、jpg、png文件!"
        multiple="true" update="messages,imageFileTable" sizeLimit="10000000" fileLimit="4" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
 <p:growl id="messages" showDetail="true" />

fileUploadListener:点击上传托管bean执行的方法
invalidFileMessage:前台格式校验提示
后台逻辑:
JSF-PrimeFaces实现图片的上传、下载、删除、预览_第2张图片

JSF-PrimeFaces实现图片的上传、下载、删除、预览_第3张图片
实现上传的过程没有遇到什么问题,event获取file,写自己的逻辑就行了。
三、图片下载
在实现图片下载的时候,遇到了点问题,相对于官方提供的组件,这里我们要稍加改动。
组件

<p:commandButton ajax="false"
                 icon="fa fa-download"
                 onclick="PrimeFaces.monitorDownload(start, stop);"
     <p:fileDownload value="#{rebatePolicyAction.imgFileDownload(model)}" />
p:commandButton>

Action中的方法要给一个指定类型的返回值

JSF-PrimeFaces实现图片的上传、下载、删除、预览_第4张图片

三、图片的预览
这个功能耗费了自己大半天,主要是对于路径的处理上,请教同事才实现。对于tomcat中Server.xml中标签的认识是第一次。

<p:commandButton id="imageBtn" icon="fa fa-eye" type="button" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
          <p:graphicImage url="#{model.imgUrl}" width="300"/>
 p:overlayPanel>

官方提供的组件,中url为name,实现的是展现保存在项目中的图片,而自己的需求是展示存储在服务器指定文件夹中的图片。问了同事才解决。
主要难点在tomcat中配置虚拟路径,不懂的可以百度,我这里就不说了,自己也是小白。弄懂了虚拟路径,其他的就没什么问题了。

你可能感兴趣的:(JSF)