Primefaces的fileUpload組件使用

        最近在學習Primefaces（當然也是項目中需要用的）。在使用其fileUpload遇到了不小的困難，現總結一下供大家及我自己今后參考使用。

        1、首先是使用環境配置：正常的Primefaces開發環境就不多說了，網上多的很。說下專門用於fileUpload的幾點。

a. 進行web.xml配置：除了創建Primefaces時系統自動提供的東西外，需要在工程的WEF-INF/web.xml里加入以下幾行內容：

    <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>  
    <context-param>  
        <param-name>primefaces.THEME</param-name>  
        <param-value>marstor</param-value>  
    </context-param>  

        這個原文復制過去就行了，我一朋友在用的時候把

<servlet-name>Faces Servlet</servlet-name>  

里Faces Servlet兩個單詞首字母小寫了，結果上傳無法使用害我用了整半天時間檢查。

 

b. 必要的jar包准備  commons-fileupload-1.2.1.jar 和commons-io-2.0.1.jar （直接點進去可下載）。這兩個文件根據配置不同有的需要放在WEF-INF/lib下一份，有的需要放在｛tomctHome｝/lib里一份（個人建議一個里面放一份，省得事多）。

c.做完上面的東西后重啟一下tomcat。

d.編寫fileUpload的代碼，注意 mode 要advanced模式的（simple模式的也不好看，也不好調）。

<p:fileUpload fileUploadListener="#{upload.fileUpload}" id="upLoad2" 
                              auto="true"  label="導入"  update="RegisterInfo"  mode="advanced"
                              style="text-align: center; width: 800px; height: 40px; " />

e.后台正常編寫就是了。。里面加個sout，看是不是能把東西打印出來。

 

           2、在做Primefaces時發現另一個東西，就是primefaces的組件可以通過調整實際頁面的css來調整其顯示效果。也就是我們可以選擇部分顯示組件而非全部顯示組件。還以這個fileUpload組件為示例。正常的 auto="true"模式的組件顯示效果如圖：
而我做出來效果如圖：看，后面的那個灰的bar，和下面的白框都不見了。實際上我在這個頁面的css里加入了如下內容：

.ui-fileupload .start {
    display: none;
}
.ui-fileupload .cancel {
    display: none;
}
.ui-fileupload .progress {
    display: none;
}


.fileupload-content{
    display: none;
}

.fileupload-buttonbar{
    visibility: hidden;
}

.ui-corner-buttom{
    display: none;
}

.fileinput-button{
    visibility: visible;
}

說白了無論什么組件，實際執行到頁面里就是一堆html代碼。我們用火狐開發者分析這個組件的所以元素，可以看到這個組件的所以組成，然后用css把不想看到的東西屏蔽掉就OK了。