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

此文是jQuery + SWFUpload + COS的上传插件源代码，使用了jquery1.4、SWFUpload2.2和COS来制作jquery上传插件。
1、引入必须的js文件和css文件：

 代码如下 复制代码

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

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

 代码如下 复制代码

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

3、初始化插件：

 代码如下 复制代码

<script type="text/javascript">
 $(function() {
  var path = "<%=path%>/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>

4、所需的上传类：

 代码如下 复制代码

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

5、在web.xml中配置上传类

 代码如下 复制代码

 <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>

如果一切顺利的话，你将看到如下的运行效果图

 

时间： 2024-09-27 10:24:06

jQuery SWFUpload与COS实现图片批量上传的相关文章

上传图片-asp.net图片批量上传问题

问题描述 asp.net图片批量上传问题 asp.net +swfupload上传且可以编辑上传的图片类似qq空间上传图片 解决方案 图片编辑用的是acx控件. swfupload只复制上传..编辑你要另外实现

插件-bootstrap file-input 图片批量上传问题

问题描述 bootstrap file-input 图片批量上传问题 我用该bootstrap file-input插件的时候,多个图片上传出现以下情况,大侠求助: 解决方案 代码和样式贴出来看一下 解决方案二: 静态页面代码: <form name="queryForm" id="queryForm" action="${basePath}sns/album/Album/stulist.do" method="post"

asp.net图片批量上传求助

问题描述 asp.net图片批量上传求助 选中文件后,图片先显示在页面,是否先将图片保存在虚拟目录,点击提交的时候上传到服务器回应的目录里没有就创建一个?求助大侠 解决方案 参考http://www.cnblogs.com/manongxiaobing/p/4694263.html 另外没有上床以前肯定不能保存在虚拟目录,但是你可以用js实现本地预览

关于图片批量上传预览

问题描述 我正在做一个需要用到图片批量上传预览的项目批量上传和预览目的都已经达到可是现在要求在预览的时候可以对图片添加备注这个把我难住了我的图片上传预览参考了http://blog.csdn.net/sq111433/article/details/16872403这篇文章,非常感谢原作者大家有没有能帮个忙的,我想了很久,还是没搞定 解决方案 解决方案二:要么给每个图片动态添加一个文本框要么仅放一个可见的文本框,根据点了哪个图片,JS把文本内容写进对应的hidden里提交(或者用个不可见的表格?

jsp-webuploader 图片批量上传的问题

问题描述 webuploader 图片批量上传的问题 js怎么设置服务端指定的java中的方法,是在server中设置,还是url中? 从前端的jsp中js的设置参数,到java中方法怎么接收,中间的业务流程是怎么样的,复制党就不要来了,我网上看了一大堆了,我有帮助文件就是看不懂,求大神解救, 解决方案 js制定你的服务器url就可以了.当然是在url中. js中用post设置的参数,可以用 request.getParameter 接受

asp图片批量上传代码(1/3)

index.asp教程 上传演示 img_class.asp 获取图片的高度和宽度的类 oupload.asp 上传处理 conn.asp 这个就不用我来说了.连接数据库教程的. upload_class.asp采用艾恩无组件上传类 可以通过oupload.asp进行设置上传文件类型,大小,是否开启生成缩略图, 默认是开启的..但是要你的空间支持:aspjpeg组件..现在的空间基本都支持. <!--#include file="conn.asp"--> <!doct

求一个图片批量上传的代码？

问题描述 在网上也找了几个例子,有用swf的,有jquery的,等等.都不是想要的那种.有没有一个可以批量上传图片,要求功能:1.自动生成缩略图,缩略图路径.2.原图路径和缩略图保存到数据库.3.在显示缩略图上能够删除,设为封面图片.4.最好是ASP.net的,结合jQuery.可能网上的很多代码都不错,但是,自己水平有限,需要多看看这方面的资料.驾驭不了这些代码啊. 解决方案 解决方案二:百度搜一般能搜出的是CSDN和博客园的代码还算好用,我们也是这么学来的在这里贴代码没多大意义,就算贴代码也

php文件图片批量上传程序代码

说明: uploadx php批量上传组件遵循开源协议(GPL),任何个人.组织可自由对本程序进行使用.二次开发等权力. 由此也将声明本人不对您个人.组织使用本程序所带来的商业利益及损失有干涉及负责,但请保留版权信息. 也欢迎对uploadx提出保贵的建议及意见,不胜感激. 本程序使用PHP程序编写,能更高效的批量处理PHP开发中的文件上传,图片处理.批量添加图片水印等问题,在使用本程序前请详细阅读使用说明! HTML表单页  代码如下 复制代码 <form enctype="multip

php简单文件图片批量上传程序代码

html代码  代码如下 复制代码 <html> <head><title>upload picture more once</title></head> <body> <form action="" method="post" enctype="multipart/form-data">  <p>Pictures:<br /> <i