jQuery + SWFUpload + COS的上传插件源代码

此文是jQuery + SWFUpload + COS的上传插件源代码，使用了jquery1.4、SWFUpload2.2和COS来制作jquery上传插件。详细请看代码说明：

一、引入必须的js文件和css文件

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

二、在body中添加组件显示目标

<div id="vinEdit"></div>

三、在jqeury中初始化插件

<script type="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的详细说明请参考SWFUpload V2.2.0 说明文档

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(e instanceof 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>