Primefaces(JSF2)实现容易显示上传文件列表功能 _JavaScript

Primefaces(JSF2)实现简单显示上传文件列表功能

Primefaces默认的文件上传组件(在非Simple模式下)不具有显示已上传文件列表的功能, 用户可能刚上传了几个文件,但后来却不知道某些文件到底上传上去了没(因为用户忘记了刚才上传了哪些文件), 此时我们需要将用户上传的文件列表出来,方便用户查看.

>>多文件上传模式

页面代码:

<p:fileUpload id="fileUploadComponent" auto="true" multiple="true" fileUploadListener="#{copyOfMainVM.handleFileUpload}" mode="advanced" dragDropSupport="false" update="uploadFileInfo"/>
          <p:dataList id="uploadFileInfo" var="fileItem" value="#{copyOfMainVM.files}" rowIndexVar="idx">  
              <span class="textOverflow220">
              <p:outputLabel id="uploadFileInfo" value="#{fileItem.fileName}"></p:outputLabel>
              </span>
              <p:spacer width="5" />
              <p:commandLink immediate="true" actionListener="#{copyOfMainVM.removeFileAction}" value="Remove" update="uploadFileInfo">
                <f:param name="fileIndex" value="#{idx}" />
              </p:commandLink>
          </p:dataList>

VM代码:

    private List<UploadedFile> files = new ArrayList<UploadedFile>();

    public void handleFileUpload(FileUploadEvent event) {
        UploadedFile file = event.getFile();
        if (null != file) {
            MessengeUtil.sendInfoMSG(file.getFileName() + " is uploaded.");
            files.add(file);
        } else {
            MessengeUtil.sendErrorMSG("No file is uploaded !");
        }
    }

    public void removeFileAction(ActionEvent event) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ExternalContext externalContext = facesContext.getExternalContext();
        HttpServletRequest request = (HttpServletRequest) externalContext.getRequest();
        int fileIndex = Integer.valueOf(request.getParameter("fileIndex"));
        if (fileIndex > -1) {
            UploadedFile tempFile = files.get(fileIndex);
            files.remove(fileIndex);
            MessengeUtil.sendInfoMSG(tempFile.getFileName() + " is removed!");
        } else {
            MessengeUtil.sendErrorMSG("Invaild file index !");
        }
    }

>>单文件上传模式

页面代码:

<p:fileUpload id="fileUploadComponent" auto="true" fileUploadListener="#{mainVM.handleFileUpload}" mode="advanced" dragDropSupport="false" update="uploadFileInfo"/>
<span class="textOverflow220">
<p:outputLabel id="uploadFileInfo" value="#{mainVM.file.fileName}"></p:outputLabel>
</span>
<p:spacer width="5" />
<p:commandLink immediate="true" actionListener="#{mainVM.removeFileAction}" value="Remove" update="uploadFileInfo,fileUploadComponent"/>

?VM代码:

    private UploadedFile file;

    public void handleFileUpload(FileUploadEvent event) {
        file = event.getFile();
        if (null != file) {
            MessengeUtil.sendInfoMSG(file.getFileName() + " is uploaded.");
        } else {
            MessengeUtil.sendErrorMSG("No file is uploaded !");
        }
    }

    public void removeFileAction(ActionEvent event) {
        file = null;
    }