在 JSF 中显示上传的图像

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

我用两个豆子解决了这个问题；一个视图作用域 bean 用于创建人员，一个会话作用域 bean 用于上传图片并以流形式获取图片。然而，这会导致上述问题。

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

上传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();
    }
}

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

相关的JSF页面部分：

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

我采取了不同的方法。我最初是为了显示上传的图像，但是如果Person尚未创建，将其全部保留在客户端似乎是一个更好的主意。我发现这个问题并根据所选答案创建以下内容：

在我的头部包括html5shiv如果浏览器是IE且版本小于9为了兼容：

<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" />

要显示/上传图像，我有以下元素：

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

还有一些 JavaScript/jQuery 魔法：

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属性现在是一个简单的属性：

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

    public UploadedFile getUploadedPicture()
    {
        return uploadedPicture;
    }

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