0

我正在尝试使用 jsf 2.0 中的 primefaces 4.0 上传文件。在我配置 pom.xml 和 web.xml 并且它可以使用 mode="simple" 并且我可以很好地选择一个文件。我的问题是以 mode="advance" 上传多个文件，它在 UI 中显示一个上传面板，但 javascript 不起作用。我没有在我的 jsf 页面中添加任何 js 库来避免与 primefaces js 的冲突。
有没有相关推荐？

如果我不能在 mode="advance" 中使用 primefaces，那么我应该用什么在 jsf 2.0 中上传多个文件？

请帮忙。- XHTML：

 <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
</h:head>
<h:body>
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{helloBean.upload}"
            mode="advanced" dragDropSupport="false" multiple="true"
            sizeLimit="100000" fileLimit="3"
            allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
    </h:form>
</h:body>
</html>

  • 管理豆

    @ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String destination = "E:\\uploadFile\\";

    private UploadedFile file;

    public void upload(FileUploadEvent event) {
        System.out.println(event.getFile().getFileName() + " is uploaded.");
    }

    public UploadedFile getFile() {
        return file;
    }

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

}

  • web.xml 

    <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

<!-- ############################################# -->
<!-- # File upload                               # -->
<!-- ############################################# -->
<filter>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <filter-class>
        org.primefaces.webapp.filter.FileUploadFilter
    </filter-class>
</filter>

<filter-mapping>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

  • pom.xml：

        <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>4.0</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.1.7</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.1.7</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.1</version>
    </dependency>

    <dependency>
        <groupId>com.sun.el</groupId>
        <artifactId>el-ri</artifactId>
        <version>1.0</version>
    </dependency>

</dependencies>

<build>
    <finalName>JavaServerFaces</finalName>

    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.1</version>
            <configuration>
                <source>1.6</source>
                <target>1.6</target>
            </configuration>
        </plugin>
    </plugins>
</build>

  • 库：我添加 commons-fileupload-1.2.jar、commons-fileupload-1.2-sources.jar、commons-io-2.4.jar、commons-io-2.4-sources.jar、primefaces-4.0.jar、primefaces-4.0-来源.jar。

  • 萤火虫的错误显示：

    TypeError: $(...).addclass is not a function
$(this).addclass('ui-state-focus');

    错误发生在文件下方。
    http://.../JavaServerFaces/javax.faces.resource/fileupload/fileupload.js.xhtml?ln=primefaces&v=4.0

我已经成功上传了 mode="simple" 但没有成功上传 mode="advance"。我缺少什么？

4

1 回答 1

0

我建议将表单提交到 iframe。因为p:fileUploadmode="simple" 必须使用提交表单。这个提议可以解决浏览器上的重新加载页面。

下面的示例代码。XHTML

<h:form enctype="multipart/form-data" target="my_iframe">
    <p:fileUpload value="#{fileUploadView.file}" mode="simple" />
    <p:commandButton value="Submit" 
                     ajax="false" 
                     actionListener="#{fileUploadView.upload}" />        
</h:form>
<iframe name="my_iframe" style="display:none;"></iframe>

托管豆

@ManagedBean
public class FileUploadView {

    private UploadedFile file;
    public void upload() {
        if(file != null) {
            System.out.println(file.getFileName());
            // TODO Auto-generated method stub           
        }
    }

    public UploadedFile getFile() {
        return file;
    }

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

这是使用 mode="advance" 上传多个文件的示例

XHTML

<h:form enctype="multipart/form-data">          
    <p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" 
                  mode="advanced" 
                  dragDropSupport="false" 
                  multiple="true" 
                  update="@this"
                  process="@this" 
                  sizeLimit="100000" 
                  fileLimit="3" 
                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" /> 
</h:form>

托管豆

@ManagedBean
public class FileUploadView {

    private UploadedFile file;

    public UploadedFile getFile() {
        return file;
    }

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

    public void handleFileUpload(FileUploadEvent event) {
        System.out.println(event.getFile().getFileName() + " is uploaded.");
        // TODO Auto-generated method stub 
    }
}
于 2014-10-05T14:52:18.963 回答