通过p:fileUpload上传图像后,在p:dataGrid中使用p:graphicImage显示图像列表

时间:2019-06-20 10:49:15

标签: jsf primefaces xhtml

我正在通过p:fileUpload上传多张图片,并在datagrid中显示上传的图片,但是上传后在datagrid中创建了空白面板

    <p:panelGrid columns="1" layout="grid" style="width: 1000px">
                            <p:outputLabel value="Upload Images"></p:outputLabel>
                            <p:fileUpload mode="advanced" multiple="false"
                                allowTypes="/(\.|\/)(gif|jpe?g|png)$/" dragDropSupport="true"
                                update="messages,updimgsfields,carouselcomp" sizeLimit="100000"
                                fileUploadListener="#{drawingattachmnt.handleFileUpload}"></p:fileUpload>

                            <!-- <p:graphicImage id="gimPhoto" value="#{fileuploadSection.image}" /> -->

                        </p:panelGrid>

                        <p:fieldset id="updimgsfields" legend="Uploaded Images">
                            <p:dataGrid id="updimgsdatagrid" var="upldimg"
                                value="#{drawingattachmnt.uploadedimages}" columns="4">
                                <p:panel id="drawingattachmntpnl" header="#{upldimg.displayId}"
                                    style="text-align:center">
                                    <h:panelGrid columns="1" cellpadding="5"
                                        style="width: 100%; height: 200px;">
                                        <p:graphicImage value="#{upldimg.imgcontent}" cache="false"
                                            stream="true">
                                            <f:param id="imgId" name="photo_id" value="#{upldimg.id}" />
                                        </p:graphicImage>
                                    </h:panelGrid>
                                </p:panel>

                                <p:draggable for="drawingattachmntpnl" revert="true"
                                    handle=".ui-panel-titlebar" stack=".ui-panel" />
                            </p:dataGrid>
                        </p:fieldset>
// file upload function  inside bean
      public void handleFileUpload(final FileUploadEvent event) throws IOException {

                if (event.getFile().getContents() != null) {
                    final ByteArrayOutputStream byteArrOutputStream = new ByteArrayOutputStream();
                    BufferedImage uploadedImage = null;
                    byte[] imageBytes = null;
                    try {
                        final String imageType = event.getFile().getContentType() != null
                                || event.getFile().getContentType().split("/") != null ? event.getFile().getContentType()
                                        .split("/")[1] : "jpeg";
                        uploadedImage = ImageIO.read(event.getFile().getInputstream());
                        ImageIO.write(uploadedImage, imageType, byteArrOutputStream);
                        imageBytes = byteArrOutputStream.toByteArray();
                        updimg.setImgcontent(new DefaultStreamedContent(new ByteArrayInputStream(imageBytes), imageType));
                        updimg.setId(UUID.randomUUID().toString().substring(0, 8));
                        updimg.setDisplayId("FIG: ");
                        uploadedimages.add(updimg);
                    } catch (final IOException io) {

                    } finally {
                        try {
                            byteArrOutputStream.close();
                            // imageInputStream.close();
                        } catch (final IOException e1) {
                            e1.printStackTrace();
                        }
                        uploadedImage.flush();
                    }

                    final FacesContext context = FacesContext.getCurrentInstance();
                    context.addMessage(null, new FacesMessage("Successful", "File uploaded Successfully "));

                }


    // List POJO

        import org.primefaces.model.StreamedContent;

        public class UploadImage {

            public String displayId;
            public String id;
            public StreamedContent imgcontent;

            public UploadImage() {

            }

            public UploadImage(final String id, final String displayId, final StreamedContent imgcontent) {
                this.id = id;
                this.displayId = displayId;
                this.imgcontent = imgcontent;
            }

            @Override
            public boolean equals(final Object obj) {
                if (obj == null) {
                    return false;
                }
                if (getClass() != obj.getClass()) {
                    return false;
                }
                final UploadImage other = (UploadImage) obj;
                if (this.id == null ? other.id != null : !this.id.equals(other.id)) {
                    return false;
                }
                return true;
            }

            public String getDisplayId() {
                return displayId;
            }

            public String getId() {
                return id;
            }

            public StreamedContent getImgcontent() {
                return imgcontent;
            }

            @Override
            public int hashCode() {
                int hash = 7;
                hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0);
                return hash;
            }

            public void setDisplayId(final String displayId) {
                this.displayId = displayId;
            }

            public void setId(final String id) {
                this.id = id;
            }

            public void setImgcontent(final StreamedContent imgcontent) {
                this.imgcontent = imgcontent;
            }

        }

我需要动态显示datagrid中的图像,但是我在datagrid中出现空白图像面板。应该怎么办?

0 个答案:

没有答案