在JSF中显示上传的图像 [英] Display uploaded image in JSF

问题描述

我有一个视图范围的bean，我创建一个人。一个人可以有一张照片。这张照片是上传人创造的同一页。图片不存储在数据库或磁盘上（因为该人尚未创建）。该bean必须被视为范围，因为一个人可以在其他地方创建，并使用相同的bean。如果bean是会话作用域，并且用户上传图片但不保存该人员，则该图片将在用户下次尝试创建人员时显示。

I用两个豆来解决这个问题。一个视图范围的bean来创建人员和一个会话范围的bean来上传图片并将图片作为流。然而，这导致了上面提到的问题。

我怎样才能以更好的方式解决这个问题？

bean：

  @ManagedBean（name =uploadBean）
 @SessionScoped 
 public class UploadBean 
 {
私人UploadedFile uploadedFile; 
 
 public UploadedFile getUploadedFile（）
 {
 return uploadedFile; 
 
 $ b $ public StreamedContent getUploadedFileAsStream（）
 {
 if（uploadedFile！= null）
 {
 return new DefaultStreamedContent（new ByteArrayInputStream uploadedFile.getContents（）））; 
} 
返回null; 
} 
 
 public void uploadFile（FileUploadEvent event）
 {
 uploadedFile = event.getFile（）; 
 
 
 
 
 $ b创建一个人bean：
  @ManagedBean（name =personBean）
 @ViewScoped 
 public class PersonBean 
 {
 private Person newPerson = new Person（）; 
 
 public Person getNewPerson（）
 {
 return newPerson; 
 
 $ b $ private private UploadedFile getUploadedPicture（）
 {
 FacesContext context = FacesContext.getCurrentInstance（）; 
 ELContext elContext = context.getELContext（）; 
 UploadBean uploadBean =（UploadBean）elContext.getELResolver（）。getValue（elContext，null，uploadBean）; 
返回uploadBean.getUploadedFile（）; 
 
 $ b $ public void createPerson（）
 {
 UploadedFile uploadedPicture = getUploadedPicture（）; 
 //用图片创建人物; 
 
 
 $ / code $ / pre 
 $ b $相关的JSF页面部分：
 
 
 < h：form enctype =multipart / form-data> 
< p：outputPanel layout =blockid =personPicture> 
  value =＃{uploadBean.uploadedFileAsStream}
 rendered =＃{uploadBean.uploadedFileAsStream！= null}/> 
< / p：outputPanel> 
  fileUploadListener =＃{uploadBean。 uploadedFile}
 update =personPicture/> 
< p：commandButton value =SaveactionListener =＃{personBean.createPerson（）}/> 
< / h：表格> 
  
 
 
解决方案
我最初是为了显示一个上传的图像，但是如果 Person 没有被创建，那么保留所有的客户端似乎是一个更好的主意。我找到了这个问题，并根据所选的答案创建了以下内容：  
 
 
在头文件中，我包含了 html5shiv < a>如果浏览器是IE浏览器，并且兼容性版本低于9： 
 
 
 < h：outputText value =& amp; amp; ; lt;！ -  [if lt IE 9]& gt; escape =false/> 
< h：outputScript library =jsname =html5shiv.js/> 
   
显示/上传图片我有这些元素：
 
 
 < p：fileUpload binding =＃{upload}mode =simple
 allowTypes =/（\。| \ /）（ gif | jpe？g | png）$ /
 value =＃{personBean.uploadedPicture}/> 
< p：graphicImage value =＃height =150binding =＃{image}/> 
  
以及一些JavaScript / jQuery魔术： 
 
 <$ 
 $ $ b $ if $（$ input $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b var reader = new FileReader（）; 
 reader.onload = function（e）
 {
 output.attr（'src'，e.target.result）; 
}; 
 reader.readAsDataURL（input.files [0]）; （
 
 
 
 $（[id ='＃{upload.clientId}']）。change（
 function（）
 { 
 readPicture（this，$（[id ='＃{image.clientId}']））; 
}）; 
  
现在 uploadedPicture 属性是一个简单的属性：
 
 $ p $  @ManagedBean（name =personBean）
 @ViewScoped 
 public class PersonBean 
 {
 private UploadedFile uploadedPicture; 
 
 Public UploadedFile getUploadedPicture（）
 {
 return uploadedPicture; 
 
 
 public void setUploadedPicture（UploadedFile uploadedPicture）
 {
 this.uploadedPicture = uploadedPicture; 
} 
} 
  




I have a view scoped bean where I create a person. A person can have a picture. This picture is uploaded the same page the person is created. The picture is not stored in a database or on disk (since the person isn't created yet). The bean has to be view scoped since a person can be created elsewhere and this uses the same bean. If the bean is session scoped and a user uploads a picture but does not save the person, the picture will be displayed next time the user tries to create a person.

I solved this by using two beans; one view scoped bean to create the person and a session scoped bean to upload the picture and to get the picture as a stream. This however causes the problem noted above.

How can I solve this in a better way?

The upload bean:

@ManagedBean(name = "uploadBean")
@SessionScoped
public class UploadBean
{
    private UploadedFile    uploadedFile;

    public UploadedFile getUploadedFile()
    {
        return uploadedFile;
    }

    public StreamedContent getUploadedFileAsStream()
    {
        if (uploadedFile != null)
        {
            return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()));
        }
        return null;
    }

    public void uploadFile(FileUploadEvent event)
    {
        uploadedFile = event.getFile();
    }
}

The create-a-person bean:

@ManagedBean(name = "personBean")
@ViewScoped
public class PersonBean
{
    private Person newPerson = new Person();

    public Person getNewPerson()
    {
        return newPerson;
    }

    private UploadedFile getUploadedPicture()
    {
        FacesContext context = FacesContext.getCurrentInstance();
        ELContext elContext = context.getELContext();
        UploadBean uploadBean = (UploadBean) elContext.getELResolver().getValue(elContext, null, "uploadBean");
        return uploadBean.getUploadedFile();
    }

    public void createPerson()
    {
        UploadedFile uploadedPicture = getUploadedPicture();
        // Create person with picture;
    }
}

The relevant JSF page part:

<h:form enctype="multipart/form-data">
    <p:outputPanel layout="block" id="personPicture">
        <p:graphicImage height="150"
            value="#{uploadBean.uploadedFileAsStream}"
            rendered="#{uploadBean.uploadedFileAsStream != null}" />
    </p:outputPanel>
        <p:fileUpload auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
            fileUploadListener="#{uploadBean.uploadedFile}"
            update="personPicture" />
    <p:commandButton value="Save" actionListener="#{personBean.createPerson()}"/>
</h:form>

解决方案

I've gone for a different approach. I initially went for displaying an uploaded image, however if the Person isn't created yet it seemed like a better idea to keep it all client side. I found this question and created the following based on the chosen answer:

In the head I include html5shiv if the browser is IE and the version is less than 9 for compatibility:

<h:outputText value="&lt;!--[if lt IE 9]&gt;" escape="false" />
<h:outputScript library="js" name="html5shiv.js" />
<h:outputText value="&lt;![endif]--&gt;" escape="false" />

To display/upload the image I have these elements:

<p:fileUpload binding="#{upload}" mode="simple"
    allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
    value="#{personBean.uploadedPicture}"/>
<p:graphicImage value="#" height="150" binding="#{image}" />

And some JavaScript/jQuery magic:

function readPicture(input, output)
{
    if (input.files && input.files[0])
    {
        var reader = new FileReader();
        reader.onload = function(e)
        {
            output.attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$("[id='#{upload.clientId}']").change(
    function()
    {
        readPicture(this, $("[id='#{image.clientId}']"));
    });

The uploadedPicture property is now a simple property:

@ManagedBean(name = "personBean")
@ViewScoped
public class PersonBean
{
    private UploadedFile uploadedPicture;

    public UploadedFile getUploadedPicture()
    {
        return uploadedPicture;
    }

    public void setUploadedPicture(UploadedFile uploadedPicture)
    {
        this.uploadedPicture = uploadedPicture;
    }
}

这篇关于在JSF中显示上传的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！