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

【问题标题】：p:fileupload, how to show preview div when set auto=truep:fileupload，设置 auto=true 时如何显示预览 div
【发布时间】：2017-09-22 10:24:42
【问题描述】：

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

以下设置自动为真。预览面板不见了

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

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

【问题讨论】：

带有“取消/关闭/删除”按钮的“预览面板”用于删除/阻止上传图片。并且使用auto=true，图像会立即上传，因此无法阻止它被上传。此功能不适用于删除上传的图像。这是你需要在例如发展自己的东西。一个数据网格/数据表/...
好的..谢谢。为了解决这个问题，我添加了一个面板来显示上传的文件和从那里删除的选项。
请复制我的大部分评论并在答案中添加代码解决方案中最相关的部分

标签： jsf primefaces

【解决方案1】：

正如上面的评论 > 带有“取消/关闭/删除”按钮的“预览面板”用于删除/防止上传图像。并且使用 auto=true 图像会立即上传，因此无法阻止它被上传。此功能不适用于删除上传的图像。 “库克尔特杰。

澄清我对 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" >

【讨论】：

不确定为什么它不显示 html 代码。粘贴在这里。
您的代码插入不正确。在每行或“代码”按钮前面使用 4 个空格 ibn

【解决方案2】：

您可以使用 base 64 序列化图像，将其各自的值保存在字符串中。这样，当再次加载图像时，更新其值并显示其新值，以防您想将图像更改为新图像。一种方法可能如下，您的 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;            
            
        }
    }

【讨论】：