Question

我尝试上传一些文件，然后通过oncomplete重定向到另一个页面问题是oncomplete仅在第一个文件上传后才起作用

<p:fileUpload  mode="advanced"
     label="#{FileMessages.file_add_file_lbl_Select_File}"
     fileUploadListener="#{fileAddFileAction.upload}"
     oncomplete="redirect(#{fileAddFileAction.groupId});"
     multiple="true"
     allowTypes="/(\.|\/)(txt|doc|docx|pdf)$/"
     widgetVar="fileUplaod" >
 </p:fileUpload>

Java Script function：redirect（groupId）

function redirect(groupId) {
     var url = "/network/group/files.html?gId="+groupId;
     $(location).attr('href',url);
}

bean.java

public void upload(FileUploadEvent event) {

    UploadedFile uploadedFile = event.getFile();

    try {
        String thumbnail = getDestination() + uploadedFile.getFileName();
        String[] filetype = thumbnail.split("\\.");
        String newfilename = Calendar.getInstance().getTimeInMillis() + "." + filetype[1];

        SystemFile file = new SystemFile();
        file.setAccount(getActor().getAccount());
        file.setCtime(new Date());
        file.setName(newfilename);
        file.setPath(getDestination());
        file.setFileType(FileUtil.checkFileType(filetype[1]));
        file.setOriginalName(uploadedFile.getFileName());

        getFileService().saveSystemFile(file);

        copyFile(getDestination() + newfilename, uploadedFile.getInputstream());

        copyFile(getDestination() + newfilename, uploadedFile.getInputstream());

    } catch (IOException ex) {
        Logger.getLogger(FileAddFileAction.class.getName()).log(Level.SEVERE, null, ex);
    }
}

Answer 1

这似乎是一个已知问题：http://code.google.com/p/primefaces/issues/detail?id=3836

用户已在此页面上完成自定义修补程序：

可以通过在p：fileUpload标记中添加以下行来使用它：

<p:ajax event="fileUploadsComplete" listener="#{filesBean.done}"/>

其中filesBean.done方法如下所示：

public void done(FileUploadsCompleteEvent event) {
    System.out.println("done"); 
}

Answer 2

我有类似的问题（Primefaces 5）。由于“父级不是ClientBehaviorHolder的实例”错误，添加ajax fileUploadsComplete失败。

这是我的黑客攻击。这不是最令人满意的，但它正在发挥作用：

<script>
    function setUploadFilesCount() {
        var numberOfFiles = $('.ui-fileupload-preview').size();
        var input = document.getElementById('fileupload-multi-fix-input');
        input.value = numberOfFiles;
        input.onchange();
    }
</script>

<h:form id="file-upload-form">
    <p:fileUpload id="file-upload" fileUploadListener="#{backingBean.handleFilesUpload}" mode="advanced" dragDropSupport="false"
                               sizeLimit="10000000" multiple="true" allowTypes="/(\.|\/)(jpg)$/" onstart="setUploadFilesCount()" update=":content">
    </p:fileUpload>
</h:form>

<h:form prependId="false" style="display:none;">
    <h:inputText id="fileupload-multi-fix-input" value="#{backingBean.numberOfUploadFiles}">
        <f:ajax event="change" execute="@form"  />
    </h:inputText>
</h:form>

所以在我的BackingBean中我有以下内容：

@Named
@SessionScoped
public class BackingBean implements Serializable{

    private static final long serialVersionUID = 1L;

    private int numberOfUploadFiles; //... add getter and setter

    private boolean isUploadComplete = false; //... add getter and setter

    private int uploadCount = 0;

    public void handleFilesUpload(FileUploadEvent event) throws IOException {

        // ... handle file upload here

        uploadCount++;

        if(uploadCount == numberOfUploadFiles){
            isUploadComplete = true;
        }
    }
}

说明：

我添加了一个JavaScript函数setUploadFilesCount和一个包含隐藏<h:form />的{{1}}。

在（第一个）文件传输开始时调用

<h:input />一次。我调用<p:fileUpload onstart=...中的JavaScript函数setUploadFilesCount来设置我的支持bean中的上传文件数。

通过读取css类onstart的元素出现次数来检测文件数。视图中ui-fileupload-preview个元素的数量等于上传文件的数量。这发生在

中

ui-fileupload-preview

$('.ui-fileupload-preview').size();会将隐藏的输入字段值提交给辅助bean。

在支持bean上，我可以通过递增计数器来检查最后一项是否上传

input.onchange();

因此，我可以检查所有项目是否已上传或在上次上传项目完成后调用特殊功能。

每次上传其中一个上传文件时都会调用

uploadCount++; if(uploadCount == numberOfUploadFiles){...}。

因此，在您的特定情况下，您必须另外将javascript包装成以下内容：

<p:fileUpload oncomplete...

将其与<h:panelGroup id="afterLoad"> <h:outputScript> function redirect(groupId) { if(#{backingBean.isUploadComplete}=='true'){ var url = "/network/group/files.html?gId="+groupId; $(location).attr('href',url); } } </h:outputScript> </h:panelGroup>的格式相同，然后添加<p:fileUpload

PrimeFaces p：fileUpload多个文件autoComplete仅在第一个文件后有效

2 个答案: