自制jquery+SWFUpload+COS上传组件

1、文档编写目的：

       此文档目的是介绍jquery+swfUpload编写的jquery上传插件vinSwfUpload的简单使用！

 一直没时间或者说没心情解决ie6兼容问题，前几天有位Iteye的朋友说解决了，我下载他解决后的代码，对比后，发现问题所在。
一：

2.具体使用步骤：

一：

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

/*jquery1.4核心库*/ <scripttype="text/javascript"src="jquery-1.4.2.min.js"></script> /*自定义jquery插件vinSwfUpload的皮肤css样式*/ <linkhref="css/vinSwfUpload-1.2-skin.css"rel="stylesheet"type="text/css"/> /*自定义jquery插件vinSwfUpload的主要css样式*/ <linkhref="css/vinSwfUpload-1.2.css"rel="stylesheet"type="text/css"/> /*自定义jquery插件vinSwfUpload的jquery插件js*/ <scripttype="text/javascript"src="vinSWFUpload-1.2.js"></script> /*官方SwfUpload的核心js/ <scripttype="text/javascript"src="core/SWFUpload-2.2.js"></script>

 
这里不该引入这个文件
<script type="text/javascript" src="core/SWFUpload-2.2.js"></script>
修改后引入

<script type="text/javascript" src="core/swfupload.js">
请参照：点击打开链接

二：

在body中添加组件显示目标

<divid="vinEdit"></div>

 

三：

在jqeury中初始化插件

<scripttype="text/javascript">    $(function() {       //文档就绪       var path = "<%=path%>/uiwidget/vinSwfUpload-1.2/";       var upload = $("#vinEdit").vinSWFUpload( {           uploadURL:'<%=path%>/swf/upload',           width : 500,           heigth : 300,           sizeUnit:"M",           skin:"green",           autoRemoveStoped:false,           flashURL : path+"core/SWFUpload.swf",           addImgURl:path+"images/add.gif",           uploadImgURl:path+"/images/upload.png",           stopImgURl:path+"images/stop.png",           deleteImgURl:path+"images/trash.gif",           tipImgURl:path+"images/tip.gif"       });                  }); </script>

 

3.参数说明：

 

注：有关SWFUpload的详细说明请参考： http://leeon.me/upload/other/swfupload.html
width : 500,	插件显示区域宽度
heigth : 100,	插件显示区域高度
uploadURL:'/swf/upload',	处理上传请求的服务器端脚本URL
flashURL:"core/SWFUpload.swf",	SWFUpload.swf的文件地址
flash9URL:"core/SWFUpload_f9.swf",	SWFUpload_f9.swf f的文件地址
hideUploadBt:true,	隐藏上传按钮
hideStopBt:true,	隐藏停止按钮
hideDeleteSelectBt:true,	隐藏删除按钮
hideDeleteAllBt:true,	隐藏删除所有按钮
addImgURl:"images/add.gif",	新增按钮的图标地址
uploadImgURl:"images/upload.png",	上传按钮的图标地址
stopImgURl:"images/stop.png",	停止按钮的图标地址
deleteImgURl:"images/trash.gif",	删除按钮的图标地址
tipImgURl:"images/tip.gif",	加载提示图片的地址
fileLimit:0,	限定用户一次性最多上传多少个文件
maxSize:'-1',//1M	上传文件体积上限，单位byte,默认10M
sizeUnit:"Byte",	选择的文件最终显示的计量结果单位
sizeFixed:2,	在计算结果后保留的小数位数
fileType:"*.*",	允许上传的文件类型
autoRemove:false,	是否自动移除完成上传的记录
autoRemoveStoped:false,	是否在停止的时候移除上传中的文件记录
skin:"gray",	皮肤样式： "gray","black", "blue","green", "orange","purple", "red"
progressStyle:"progressBar",//progressBar,percent	进度显示效果 Percent：百分比 progressBar：进度条

 

 

 

4、效果图预览 （1）

 

 

 

效果图预览 （2）

 

 

 

 

 

有了上传插件，那肯定是要有处理上传的类的，举例使用servlet+COS：

下面是主要代码：（详细代码见class文件）

DefaultFileRenamePolicy rename = generateFileRenamePolicy();       MultipartRequest multi =null;       try {           multi =new MultipartRequest(request,parameters.getSaveDirectory(),parameters.getMaxPostSize(),parameters.getEncoding(), rename);           renderJson(response,Constant.UPLOAD_SUCCESS);       }catch (IOException e) {           if(!BlankUtil.isBlank(e.getMessage())){              int index = e.getMessage().indexOf("Posted content length of");              if(index>-1){                  renderJson(response,Constant.FILE_OVERSETSIZE);              }else{                  if(einstanceof IOException){                     renderJson(response,Constant.IO_ERROR);                  }else{                     renderJson(response,Constant.UPLOAD_FAILED);                  }              }              logger.error(e.getMessage(),e.getCause());           }else{              logger.info("--- upload file upload error ---");              deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());           }           return;       }

 

写好了处理类就是配置了：

web.xml中添加下面配置：

<!--swfUploader  -->    <servlet>       <servlet-name>swfUploader</servlet-name>       <servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>       <!--上传的文件大小上限单位M-->       <init-param>           <param-name>FILE_SIZE_LIMIT</param-name>           <param-value>10</param-value>       </init-param>       <!--一次性上传的文件个数上限-->       <init-param>           <param-name>FILE_COUNT_LIMIT</param-name>           <param-value>10</param-value>       </init-param>       <!--请求响应编码格式-->       <init-param>           <param-name>ENCODING</param-name>          <param-value>utf-8</param-value>       </init-param>       <!--是否使用自定义目录-->       <init-param>           <param-name>USE_CUSTOMDIR</param-name>           <param-value>false</param-value>       </init-param>       <!--自定义的文件保存目录-->       <init-param>           <param-name>ROOT_UPLOADDIR</param-name>           <param-value>rootUpload</param-value>       </init-param>    </servlet>    <servlet-mapping>       <servlet-name>swfUploader</servlet-name>       <url-pattern>/swf/upload</url-pattern>    </servlet-mapping>