如何从 p:文件上传 选择后和上传之前

Question

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

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

有没有办法在选择文件时调用支持Bean中的方法并将其传递给该文件，还是PrimeFaces不允许这种情况发生？

索引.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>

上传豆子.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

>PrimeFacesp: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;

您可以选择一个文件，在上传之前，它会记录在控制台中

文件 { name： "myImage.PNG"， 最后修改： 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" .... />不幸的是我现在没有时间测试这个，但它可能会起作用。