主题：jquery1.4+SWFUpload2.2+COS的jquery上传插件

一：

引入必须的js文件和css文件：




Java代码 
1./*jquery1.4核心库*/ 
2.<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
3./*自定义jquery插件vinSwfUpload的皮肤css样式*/ 
4.<link href="css/vinSwfUpload-1.2-skin.css" rel="stylesheet" type="text/css"/> 
5./*自定义jquery插件vinSwfUpload的主要css样式*/ 
6.<link href="css/vinSwfUpload-1.2.css" rel="stylesheet" type="text/css"/> 
7./*自定义jquery插件vinSwfUpload的jquery插件js*/ 
8.<script type="text/javascript" src="vinSWFUpload-1.2.js"></script> 
9./*官方SwfUpload的核心js/ 
10.<script type="text/javascript" src="core/SWFUpload-2.2.js"></script> 


二：

在body中添加组件显示目标




Java代码 
1.<div id="vinEdit"></div> 


三：

在jqeury中初始化插件



Java代码 
1.<script type="text/javascript"> 
2.    $(function() { 
3.        // 文档就绪 
4.        var path = "<%=path%>/uiwidget/vinSwfUpload-1.2/"; 
5.        var upload = $("#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的详细说明请参考SWFUpload V2.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.swf f的文件地址 
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.DefaultFileRenamePolicy rename = generateFileRenamePolicy(); 
2.        MultipartRequest multi = null; 
3.        try { 
4.            multi = new MultipartRequest(request, parameters.getSaveDirectory(), parameters.getMaxPostSize(),parameters.getEncoding(), rename); 
5.            renderJson(response,Constant.UPLOAD_SUCCESS); 
6.        } catch (IOException e) { 
7.            if(!BlankUtil.isBlank(e.getMessage())){ 
8.                int index = e.getMessage().indexOf("Posted content length of"); 
9.                if(index>-1){ 
10.                    renderJson(response,Constant.FILE_OVERSETSIZE); 
11.                }else{ 
12.                    if(e instanceof IOException){ 
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("--- upload file upload error ---"); 
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> 

原文：http://www.iteye.com/topic/1068978