论坛首页 Web前端技术论坛

RichFaces Upload解决方案

浏览 3339 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2013-04-28   最后修改:2014-02-25

Upload解决方案

概述

BSP业务当中,用户在系统界面需要有上传文件的功能。JSF本身并没有提供上传的组件,如果使用原生态的JSF做上传工具,可能需要花费很多额外的操作,所幸的是,Richfaces提供了一个高效可控并且易用的上传组件:<rich:fileUpload>,该组件界面简洁美观,功能丰富。下面将针对其使用方法进行详细说明。

功能介绍

关键特点如下

1,正在上传的时候能够显示进度条。(以及当前已上传文件的大小、耗时,也可以设置大小的显示格式)

2,能够严格限制上传文件的格式,大小以及数量。(以及是否允许选择重复的文件)

3,同时上传多个文件。(一次选择一个或多个文件上传)

4,内嵌Flash模式。

5,中途取消上传的请求。

6,标准的JSF国际化。

7,友好的用户界面与用户体验。

8,(支持ajax事件)

Upload组件使用的是Ajax化的操作方式,界面风格如下:

 

快速入门

我们在这里使用一个简单的例子,来快速掌握

在页面,只需要引入组件的标签如下:

<rich:fileUpload  id="uploadImgFile"  fileUploadListener="#{upload.uploadFileListener}"

addControlLabel="select file" uploadControlLabel="upload"  listHeight="300" noDuplicate="true" acceptedTypes="jpg, gif, png, bmp">

</rich:fileUpload>

 

对应的后台bean代码如下

@Name("upload")

@AutoCreate

public class Upload {

public void uploadFileListener(UploadEvent event) throws IOException {

List<UploadItem> items = event.getUploadItems();

for (UploadItem item : items) {

System.out.println("file path:" + item.getFileName() + ",size:"

+ item.getFileSize());

                File file=item.getFile();//取到了文件句柄,后面的逻辑即可对文件进行上传等操作

}

}

}

以上代码是为了有个直观的使用印象,达到快速入门的目的,而忽略其他的逻辑。rich:fileUpload里涉及到的标签从字面也能大致理解其中的含义,如fileUploadListener

是指定了上传时所执行的后台方法。 addControlLabeluploadControlLabel等是用来定义页面操作时该显示的文字。listHeight用来指定上传界面的高度等等,后面会有标签的详细介绍。

在后台bean Upload类中,注意方法的入口参数为UploadEvent event。这个event提供了几个最常用的方法,

isMultiUpload() 这个方法返回true就表示是多个文件上传。

getUploadItems()方法 返回一个集合类型,里面包含了UploadItem对象,这个UploadItem里面就包含了文件本身的信息。

getUploadItem()方法返回第一个上传的文件。下面我们将详细介绍upload组件的细节。

使用细节

配置

文件上传的时候有两个地方可以选择存储,1是临时存储在内存,以待程序进行下一步的处理该文件流,使用此方法最好是文件比较小,否则会占用很多内存。2是指定某个临时目录用于存放正在上传的文件。如果你不配置,默认的是内存存储。(默认方式为临时文件方式)

这两种方式可以在web.xml文件当中可以配置,配置细节如下

<init-param>
<param-name>createTempFiles</param-name>        
<param-value>true</param-value>        
</init-param>

另外还有一个地方需要在web.xml里面配置,那就是允许上传文件的大小,大小是以byte为单位,配置如下: 

<init-param>
<param-name>maxRequestSize</param-name>        
<param-value>1000000</param-value>        
</init-param>

 

功能属性

uploadData:该属性是用来指定上传文件的集合,该集合里的对象为UploadItem对象。

如:<rich:fileUpload uploadData="#{bean.data}"/>

在后台bean声明data集合变量与之对应,那么在使用的时候通过遍历UploadItem对象即可取到文件。

fileUploadedListener:该属性是指所有文件上传到临时文件夹或者内存当中以后,每个临时文件执行上传时会依次调用此属性指定的方法。该方法有个入口参数UploadEvent event,该对象已在快速入门当中进行说明。

immediateUpload:如果它被设置为true,那么选中的文件会立即上传,不需要等待点击上传按钮,即会进行上传操作

autoclear:在多个文件上传时,每一个等待上传的文件旁边都有一个cancel按钮,点击cancel按钮时,它会从正在等待上传的列表当中清除当前文件。当文件已经上传完毕时,上传列表旁边按钮的cancel会显示成clear,点击此按钮会从已上传的列表当中清除该文件。他们都是由autocleartrue来控制的。

acceptedTypes:用来限制可以上传文件的后缀类型,如jpgbmp等等。如:acceptedTypes=jpg,bmp

maxFilesQuantity:用来限定可批量上传文件的数量。

noDuplicate:值为true时上传多个时不允许重复的文件。

allowFlash:值为true时,允许组件使用flash模块。

外观属性

listHeightlistWidth:用来控制上传窗口的高度和长度。

disabled:使整个上传组件不可用。

uploadControlLabel定义上传按钮的名称。

transferErrorLabel文件上传错误时的描述。

validatorvalidatorMessage可以自己定义验证器以及验证不通过时的消息。

stopEntryControlLabel点击停止按钮时的自定义名称。

sizeErrorLabel:自定义文件大小提示错误内容。

doneLabel:完成后的提示信息。

clearControlLabel:清除按钮的重命名

addControlLabel:添加按钮的自定义命名

cancelEntryControlLabel:按钮cancel的自定义命名 。

 

事件属性与CSS调整的相关内容在此略去,richfaces官方文档会有详细介绍。

注意事项

1,在上传多个文件的时候,listner方法会被执行多次。有几个文件就会执行几次。所以在listner方法当中要注意,文件的操作方式应该是针对某一个文件进行操作的。

 

2,前面提到过,上传的文件可能会以临时目录或者是内存的方式存在的,通过uploadItem.getIsTemp()方法,我们可以获得文件是临时目录方式还是内存方式。如果返回false那么该文件是以内存方式存储,这时通过uploadItem获取的文件就需要通过uploadItem.getData()方式来获取byte流。如果返回true那么就要通过getFile()方法来获得文件。否则会抛出空指针异常。

 

(若上传文件以临时文件存在,上传完记得把临时文件删除)

<!--EndFragment-->
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics