Primefaces的fileUpload组件使用

最新推荐文章于 2023-05-07 06:50:37 发布

wanmeishijie666

最新推荐文章于 2023-05-07 06:50:37 发布

阅读量790

点赞数

分类专栏： PrimeFaces

PrimeFaces 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

primefaces Advanced 模式上传，在IE下基本上只能传四百M以下的，具体的特别准确的数字我没有试验过，但是我自己用的时候，500以上的，IE浏览器肯定会卡死。Chrome和FF没事。用Simple 模式的话，与浏览器的最大可上传文件体积相当（也就是IE8及以下是两个G。）

1、首先是使用环境配置：正常的Primefaces开发环境就不多说了，网上多的很。说下专门用于fileUpload的几点。

a. 进行web.xml配置：除了创建Primefaces时系统自动提供的东西外，需要在工程的WEF-INF/web.xml里加入以下几行内容：

[html] view plain copy print ?

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

<span style="font-size:14px;">    <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>  </span>

新增加，如果用的最新的primefaces4.0版本的话，需要在上述信息后加入：

[html] view plain copy print ?

<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>commons</param-value>
</context-param>

    <context-param>
        <param-name>primefaces.UPLOADER</param-name>
        <param-value>commons</param-value>
    </context-param>

这个原文复制过去就行了，我一朋友在用的时候把

[html] view plain copy print ?

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

<span style="font-size:14px;"><servlet-name>Faces Servlet</servlet-name>  </span>

里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模式的也不好看，也不好调）。

[html] view plain copy print ?

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

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

e.后台正常编写就是了。。里面加个sout，看是不是能把东西打印出来。

2、在做Primefaces时发现另一个东西，就是primefaces的组件可以通过调整实际页面的css来调整其显示效果。也就是我们可以选择部分显示组件而非全部显示组件。还以这个fileUpload组件为示例。正常的 auto="true"模式的组件显示效果如图：
而我做出来效果如图：看，后面的那个灰的bar，和下面的白框都不见了。实际上我在这个页面的css里加入了如下内容：

[plain] view plain copy print ?

.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;
}

<span style="font-size:14px;">.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;
}</span>

说白了无论什么组件，实际执行到页面里就是一堆html代码。我们用火狐开发者分析这个组件的所以元素，可以看到这个组件的所以组成，然后用css把不想看到的东西屏蔽掉就OK了。