主题：jquery1.4+SWFUpload2.2+COS的jquery下传插件
主题：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
一：
引入必须的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