主题：jquery1.4+SWFUpload2.2+COS的jquery上传插件
publicTIM 2011-06-14
一：
引入必须的js文件和css文件：
Java代码
1./*jquery1.4核心库*/
2.<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
3./*自定义jquery插件vinSwfUpload的皮肤css样式*/
4.<linkhref="css/vinSwfUpload-1.2-skin.css"rel="stylesheet"type="text/css"/>
5./*自定义jquery插件vinSwfUpload的主要css样式*/
6.<linkhref="css/vinSwfUpload-1.2.css"rel="stylesheet"type="text/css"/>
7./*自定义jquery插件vinSwfUpload的jquery插件js*/
8.<scripttype="text/javascript"src="vinSWFUpload-1.2.js"></script>
9./*官方SwfUpload的核心js/
10.<scripttype="text/javascript"src="core/SWFUpload-2.2.js"></script>
二：
在body中添加组件显示目标
Java代码
1.<divid="vinEdit"></div>
三：
在jqeury中初始化插件
Java代码
1.<scripttype="text/javascript">
2.$(function(){
3.//文档就绪
4.varpath="<%=path%>/uiwidget/vinSwfUpload-1.2/";
5.varupload=$("#vinEdit").vinSWFUpload({
6.uploadURL:'<%=path%>/swf/upload',
7.width:500,
8.heigth:300,
9.sizeUnit:"M",
10.skin:"green",
11.autoRemoveStoped:false,
12.flashURL:path+"core/SWFUpload.swf",
13.addImgURl:path+"images/add.gif",
14.uploadImgURl:path+"/images/upload.png",
15.stopImgURl:path+"images/stop.png",
16.deleteImgURl:path+"images/trash.gif",
17.tipImgURl:path+"images/tip.gif"
18.});
19.
20.
21.});
22.</script>
3.参数说明：
注：有关SWFUpload的详细说明请参考SWFUploadV2.2.0说明文档：
http://leeon.me/upload/other/swfupload.html
Java代码
1.width:500,插件显示区域宽度
2.heigth:100,插件显示区域高度
3.uploadURL:'/swf/upload',处理上传请求的服务器端脚本URL
4.flashURL:"core/SWFUpload.swf",SWFUpload.swf的文件地址
5.flash9URL:"core/SWFUpload_f9.swf",SWFUpload_f9.swff的文件地址
6.hideUploadBt:true,隐藏上传按钮
7.hideStopBt:true,隐藏停止按钮
8.hideDeleteSelectBt:true,隐藏删除按钮
9.hideDeleteAllBt:true,隐藏删除所有按钮
10.addImgURl:"images/add.gif",新增按钮的图标地址
11.uploadImgURl:"images/upload.png",上传按钮的图标地址
12.stopImgURl:"images/stop.png",停止按钮的图标地址
13.deleteImgURl:"images/trash.gif",删除按钮的图标地址
14.tipImgURl:"images/tip.gif",加载提示图片的地址
15.fileLimit:0,限定用户一次性最多上传多少个文件
16.maxSize:'-1',//1M上传文件体积上限，单位byte,默认10M
17.sizeUnit:"Byte",选择的文件最终显示的计量结果单位
18.sizeFixed:2,在计算结果后保留的小数位数
19.fileType:"*.*",允许上传的文件类型
20.autoRemove:false,是否自动移除完成上传的记录
21.autoRemoveStoped:false,是否在停止的时候移除上传中的文件记录
22.postParams:{}可以将其他字段跟随上传文件一起传到后台
23.skin:"gray",皮肤样式：
24."gray","black",
25."blue","green",
26."orange","purple",
27."red"
28.progressStyle:"progressBar",//progressBar,percent进度显示效果
29.Percent：百分比
30.progressBar：进度条
4、效果图预览（1）
效果图预览（2）
有了上传插件，那肯定是要有处理上传的类的，举例使用servlet+COS：
下面是主要代码：（详细代码见class文件）
Java代码
1.DefaultFileRenamePolicyrename=generateFileRenamePolicy();
2.MultipartRequestmulti=null;
3.try{
4.multi=newMultipartRequest(request,parameters.getSaveDirectory(),parameters.getMaxPostSize(),parameters.getEncoding(),rename);
5.renderJson(response,Constant.UPLOAD_SUCCESS);
6.}catch(IOExceptione){
7.if(!BlankUtil.isBlank(e.getMessage())){
8.intindex=e.getMessage().indexOf("Postedcontentlengthof");
9.if(index>-1){
10.renderJson(response,Constant.FILE_OVERSETSIZE);
11.}else{
12.if(einstanceofIOException){
13.renderJson(response,Constant.IO_ERROR);
14.}else{
15.renderJson(response,Constant.UPLOAD_FAILED);
16.}
17.}
18.logger.error(e.getMessage(),e.getCause());
19.}else{
20.logger.info("---uploadfileuploaderror---");
21.deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());
22.}
23.return;
24.}
写好了处理类就是配置了：
web.xml中添加下面配置：
Java代码
1.<!--swfUploader-->
2.<servlet>
3.<servlet-name>swfUploader</servlet-name>
4.<servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>
5.<!--上传的文件大小上限单位M-->
6.<init-param>
7.<param-name>FILE_SIZE_LIMIT</param-name>
8.<param-value>10</param-value>
9.</init-param>
10.<!--一次性上传的文件个数上限-->
11.<init-param>
12.<param-name>FILE_COUNT_LIMIT</param-name>
13.<param-value>10</param-value>
14.</init-param>
15.<!--请求响应编码格式-->
16.<init-param>
17.<param-name>ENCODING</param-name>
18.<param-value>utf-8</param-value>
19.</init-param>
20.<!--是否使用自定义目录-->
21.<init-param>
22.<param-name>USE_CUSTOMDIR</param-name>
23.<param-value>false</param-value>
24.</init-param>
25.<!--自定义的文件保存目录-->
26.<init-param>
27.<param-name>ROOT_UPLOADDIR</param-name>
28.<param-value>rootUpload</param-value>
29.</init-param>
30.</servlet>
31.<servlet-mapping>
32.<servlet-name>swfUploader</servlet-name>
33.<url-pattern>/swf/upload</url-pattern>
34.</servlet-mapping>
