我有一个视图范围的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>我最初是为了显示一个上传的图像，但是如果 Person 没有被创建，那么保留所有的客户端似乎是一个更好的主意。我找到了这个问题，并根据所选的答案创建了以下内容：
在头文件中，我包含了 html5shiv 如果浏览器是IE浏览器，并且兼容性版本低于9：
< h：outputText value =& amp; amp; ; lt;！ - [if lt IE 9]& gt; escape =false/> < h：outputScript library =jsname =html5shiv.js/>以及一些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="<!--[if lt IE 9]>" escape="false" /> <h:outputScript library="js" name="html5shiv.js" /> <h:outputText value="<![endif]-->" 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中显示上传的图像
发布评论