Question

<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" auto="true" />

以下是将auto设置为true。预览面板消失了

以下设置为auto为false。预览面板正在显示

将auto设置为true时， PrimeFaces 删除了预览div。这导致无法在保存之前删除上传的文件。有没有解决方法？将auto设置为true，但仍然显示预览面板并关闭img以删除上传的文件。

Answer 1

从上面的评论＆gt;预览面板＆＃39;与'cancle / close / remove＆＃39;按钮用于删除/阻止图像上传。并且使用auto = true时，图像会立即上传，因此无法上传图像。此功能不适用于删除上传的图像。＆＃34;作者：Kukeltje。

澄清我对auto = true选项的误解。解决方案如下：

当文件已经上传时，使用后端bean临时保存并显示值而不保存到实际路径或数据库（在我的情况下是实际路径）

后端bean方法：

List<UploadedFile> uploadedPhotoes = new ArrayList<UploadedFile>();
public void handleFileUpload(FileUploadEvent event) {
    uploadedPhotoes.add(event.getFile());
}
public void removeUploadedPhoto(int index) {
    uploadedPhotoes.remove(index);
}

public String getImageContentsAsBase64(UploadedFile photo) {
    return Base64.getEncoder().encodeToString(photo.getContents());
}

在xhtml文件中：

<ui:repeat var="photo" value="#{biddingPlaceBean.uploadedPhotoes}" varStatus="loop" >

Answer 2

您可以使用 base 64 序列化图像，并将其各自的值保存在String中。这样一来，当您再次更改图片时，更新其值并显示其新值，以防您想更改新图片。一种方法可能是以下方法，即xhtml：

<h:panelGroup id="pnlImage" layout="block" styleClass="fl_container_24">						
	<h:panelGroup id="pnlImageFoto" styleClass="fl_prefix_4 fl_grid_4 fl_suffix_4"> 
	<h:graphicImage id="imagen" value="#{YourMb.Image}" 
	styleClass="ui-expanded-widget-horizontal"/>
    </h:panelGroup>						                        
</h:panelGroup>
                    
<h:panelGroup layout="block" styleClass="fl_clear" />
<p:spacer height="4"/>
                    
<h:panelGroup id="FileImage" layout="block" styleClass="fl_container_24">						
	<p:fileUpload id="btnUpload"
		label="upload image"
        fileUploadListener="#{YourMb.uploadImage}" auto="true"
        allowTypes="/(\.|\/)(jpg|JPG|JPEG|jpeg|png|PNG)$/" 
        styleClass="fl_prefix_4 fl_grid_4 fl_suffix_4" mode="advanced" update="pnlImage" skinSimple="true"/>
</h:panelGroup>

您的MB：

public void uploadImage(FileUploadEvent event) throws URISyntaxException {
        try {
            UploadedFile uploadedFile = event.getFile();
            String nameImage = uploadedFile.getFileName();
            byte[] bytes = IOUtils.toByteArray(uploadedFile.getInputstream());
            String tempImage = Base64.getEncoder().encodeToString(bytes);
            String extension = FilenameUtils.getExtension(nameImage);
            Image = Objects.isNull(extension) || extension.isEmpty() ? null: 
                    "data:image/" + extension.trim() + ";base64," + tempImage;
        } catch (IOException e) {
            image= null;            
            
        }
    }

p：fileupload，设置auto = true时如何显示预览div

2 个答案: