Question

我正在尝试使用jsf 2.0中的primefaces 4.0上传文件。配置pom.xml和web.xml后，它可以使用mode =“simple”，我可以很好地选择一个文件。我的问题是在mode =“advance”中上传多个文件，它在UI中显示上传面板但javascript无法正常工作。我没有在我的jsf页面中添加任何js lib来逃避与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>

ManageBean

@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>

library：我添加了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-sources.jar。
来自firebug的错误显示：
```
TypeError: $(...).addclass is not a function
$(this).addclass('ui-state-focus');
```
错误发生在文件下方的 HTTP：/.../ JavaServerFaces / javax.faces.resource /文件上传/ fileupload.js.xhtml LN = primefaces＆安培; V = 4.0

我已经上传了mode =“simple”成功但没有成功使用mode =“advance”。我错过了什么？

Answer 1

我建议将表单提交给iframe。由于p:fileUpload模式=＆＃34;简单＆＃34;必须使用提交表格。这个建议可以解决浏览器上的重载页面。

下面的示例代码。 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

@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 =＆＃34; advance＆＃34;

上传多个文件的示例

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

@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 
    }
}

Primefaces无法在模式提前jsf 2.0中工作

1 个答案: