2014-10-05 22 views
0

我想在jsf 2.0中使用primefaces 4.0上傳文件。 我配置pom.xml和web.xml後,它可以與mode =「simple」一起工作,我可以很好地選擇一個文件。 我的問題是在mode =「advance」中上傳多個文件,它在用戶界面中顯示上傳面板,但JavaScript不起作用。 我不會在我的jsf頁面中添加任何js庫以轉義與primefaces js的衝突。
你有什麼推薦相關嗎?Primefaces是不是在模式下提前jsf 2.0

在我無法使用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> 
    
  • 庫:ⅰ添加公地文件上傳-1.2.jar,公地文件上傳-1.2-sources.jar,公地-IO-2.4.jar, 公地-IO-2.4 sources.jar,primefaces- 4.0.jar,primefaces-4.0-sources.jar。從螢火蟲

  • 錯誤顯示:

    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 =「advance」成功但不成功。 我缺少什麼?

+0

p:fileUpload在簡單模式下不支持多個文件上傳。如果上傳多個,你應該選擇advance。請發佈所有使用mode =「advance」的代碼。 – wittakarn 2014-10-05 13:43:24

+0

嗨, 我知道mode =「simple」不支持上傳多個文件。 我的意思是添加一個每次用戶點擊「添加上傳」命令按鈕。 它將重新載入頁面並且將顯示列表 這種方式也可以上傳多個文件但缺點是每次重新載入頁面時都會出現cliking命令按鈕。 我該怎麼做,而不是再次加載jsf頁面? 源代碼我將在明天發佈。 – JavaDeveloper 2014-10-05 14:17:27

回答

0

我建議將表單提交給iframe。由於p:fileUpload模式=「簡單」必須使用提交表單。這個建議可以解決瀏覽器上的重新加載頁面。

下面的示例代碼。 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; 
    } 
} 

這通過使用模式= 「提前」

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 
    } 
} 
+0

嗨,我會考慮它。 您可以給我發送任何簡單的上傳源代碼與mode =「advance」? xhtml只需要表單上傳。 我想參考。 謝謝 – JavaDeveloper 2014-10-05 15:17:18

+0

已更新。 祝你好運。 – wittakarn 2014-10-05 15:27:53

+0

嗨,我已經添加了代碼。請檢查一下。謝謝 – JavaDeveloper 2014-10-05 20:06:41