如何在选择之后和上传之前从 p:fileUpload 中获取选定的文件

Question

我有一个带有文件上传器的应用程序，我想在用户上传所选文件之前显示一些信息。

例如用户选择要上传的文件、应用程序、客户端，然后抓取该文件并从中读取一些信息以显示到视图。然后，如果这是用户希望看到的内容，他们可以点击上传。

有没有办法在选择文件时调用支持 bean 中的方法并将该文件传递给它，或者 PrimeFaces 不会让这种情况发生？

index.xhtml

<h:form id="uploadform" prependId="false" enctype="multipart/form-data">
    <p:outputPanel id="container">
        <center>
            <p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"
                    dragDropSupport="false" allowTypes="/(\.|\/)(csv|xlsx)$/" update="messages"/>

            <p:growl id="messages" showDetail="true" />

        </center>
    </p:outputPanel>                
</h:form>

UploadBean.java

import org.apache.poi.util.IOUtils;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ViewScoped
@ManagedBean(name = "uploadBean")
public class NetezzaUploadBean implements java.io.Serializable {

    private static final long serialVersionUID = 1L;

    private UploadedFile file = null;

    @PostConstruct
    public void init() {
    }

    public void getFileBeforeSubmit() {
        //Where I want to do some work with the file    
    }

    public void handleFileUpload(FileUploadEvent event){
        FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile uploadedFile) {
        this.file = uploadedFile;
    }
}

Answer 1

PrimeFaces p:fileUpload 似乎有一个很棒的未记录的功能，您可以在其中使用本机文件输入 'onAdd' 事件（或类似事件）。我在 2-fileUpload.js 文件

的源代码（已打开 ;-)）中找到了这个

if($this.cfg.onAdd) {
    $this.cfg.onAdd.call($this, file, function(processedFile) {
       file = processedFile;
       data.files[0] = processedFile;
       this.addFileToRow(file, data);
    });
}

来自 $this 的 cfg 属性可以通过

访问

PF('myWidgetId').cfg

如果你像

这样预先声明一个函数

function myOnAddHandler(file) {
    console.log(file);
}

并使用

将其添加到小部件

PF('myWidgetId').cfg.myOnAddHandler;

您可以 select 一个文件并在上传之前查看它是否已登录到控制台

File { name: "myImage.PNG", lastModified: 1533756086560, webkitRelativePath: "", size: 38344, type: "image/png" }

然后您可以扩展它以使用 HTML5 文件 API 并阅读它

function myOnAddHandler(file) {
    var reader = new FileReader(); 
    reader.onload = function(readerEvt) { 
        var binaryString = readerEvt.target.result;
        console.log(btoa(binaryString));
    };
    reader.readAsBinaryString(file);
}

PrimeFaces 本身也在相关 addFileToRow 中使用这种方式来显示预览

在查看了更多 PrimeFaces 的 java 代码之后，您甚至可以 PF('myWidgetId').cfg.myOnAddHandler; 而不是 <p:fileUpload onAdd="myOnAddHandler" .... /> 不幸的是我没有时间立即测试，但它可能会起作用。

如何在选择之后和上传之前从 p:fileUpload 中获取选定的文件

How to get selected files from p:fileUpload after selection and before uploading

jsf

file-upload

primefaces