夏日博客

A-A+

jQuery SWFUpload与COS实现图片批量上传

2016年01月07日 前端设计 暂无评论 阅读 6 views 次

下文给我们介绍了一下基于jQuery SWFUpload配合COS来实现图片批量上传插件了，下面一起来看看，希望例子能帮助到各位同学哦。

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

1、引入必须的js文件和css文件,代码如下:

  1. <!--引入jquery插件，其它版本也可以-->  
  2. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
  3. <!--jquery插件vinSwfUpload的js-->  
  4. <script type="text/javascript" src="vinSWFUpload-1.2.js"></script>  
  5. <!--SwfUpload核心js-->  
  6. <script type="text/javascript" src="core/SWFUpload-2.2.js"></script>  
  7. <!--jquery插件vinSwfUpload的核心css-->  
  8. <link href="css/vinSwfUpload-1.2.css" rel="stylesheet" type="text/css"/>  
  9. <!--jquery插件vinSwfUpload的皮肤css-->  
  10. <link href="css/vinSwfUpload-1.2-skin.css" rel="stylesheet" type="text/css"/>  

2、在body中添加组件显示目标,代码如下:

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

3、初始化插件,代码如下:

  1. <script type="text/javascript">  
  2.  $(function() {  
  3.   var path = "<%=path%>/vinSwfUpload-1.2/";  
  4.   var upload = $("#vinEdit").vinSWFUpload( {  
  5.    uploadURL:'<%=path%>/swf/upload',  
  6.    width : 500,  
  7.    heigth : 300,  
  8.    sizeUnit:"M",  
  9.    skin:"green",  
  10.    autoRemoveStoped:false,  
  11.    flashURL : path+"core/SWFUpload.swf",  
  12.    addImgURl:path+"images/add.gif",  
  13.    uploadImgURl:path+"/images/upload.png",  
  14.    stopImgURl:path+"images/stop.png",  
  15.    deleteImgURl:path+"images/trash.gif",  
  16.    tipImgURl:path+"images/tip.gif"  
  17.   });  
  18.  });  
  19. </script>  

4、所需的上传类,代码如下:

  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("--- 文件上传失败 ---");  
  21.     deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());  
  22.    }  
  23.    return;  
  24. }  

5、在web.xml中配置上传类,代码如下:

  1.  <servlet>  
  2.  <servlet-name>swfUploader</servlet-name>  
  3.  <servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>  
  4.  <!--上传文件大小上限 单位M-->  
  5.  <init-param>  
  6.   <param-name>FILE_SIZE_LIMIT</param-name>  
  7.   <param-value>10</param-value>  
  8.  </init-param>  
  9.  <!--一次性上传的文件个数上限-->  
  10.  <init-param>  
  11.   <param-name>FILE_COUNT_LIMIT</param-name>  
  12.   <param-value>10</param-value>  
  13.  </init-param>  
  14.  <!--请求响应编码格式-->  
  15.  <init-param>  
  16.   <param-name>ENCODING</param-name>  
  17.   <param-value>utf-8</param-value>  
  18.  </init-param>  
  19.  <!--是否使用自定义目录-->  
  20.  <init-param>  
  21.   <param-name>USE_CUSTOMDIR</param-name>  
  22.   <param-value>false</param-value>  
  23.  </init-param>  
  24.  <!--自定义的文件保存目录-->  
  25.  <init-param>  
  26.   <param-name>ROOT_UPLOADDIR</param-name>  
  27.   <param-value>rootUpload</param-value>  
  28.  </init-param>  
  29. </servlet>  
  30. <servlet-mapping>  
  31.  <servlet-name>swfUploader</servlet-name>  
  32.  <url-pattern>/swf/upload</url-pattern>  
  33. </servlet-mapping>  
标签：

给我留言