<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> 百度uploader Demo</title>

<!--引入CSS-->

<link rel="stylesheet" type="text/css" href="/js/webuploader/css/webuploader.css">

<script type="text/javascript" src="/js/webuploader/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="/js/webuploader/js/webuploader.min.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

</head>

<body>

<h2>文件上传</h2>

<!--dom结构部分-->

<div id="uploader-demo">

    <!--用来存放item-->

    <div id="thelist" class="uploader-list"></div>

    <div class="btns">

	<div id="picker"><input type="file" /></div>

	<button id="ctlBtn" class="btn btn-default">开始上传</button>

    </div>

</div>

<script type="text/javascript">

jQuery(function() {

    var $ = jQuery,

        $list = $('#thelist'),

        $btn = $('#ctlBtn'),

        state = 'pending',

        uploader;

    uploader = WebUploader.create({

        // 不压缩image

        resize: false,

        // swf文件路径

        swf: '/js/webuploader/js/Uploader.swf',

        // 文件接收服务端。

        server: '/uploadMeterialAttachment.do',

        fileVal:'upload',

        // 选择文件的按钮。可选。

        // 内部根据当前运行是创建，可能是input元素，也可能是flash.

        pick: '#picker'

    });

    // 当有文件添加进来的时候

    uploader.on( 'fileQueued', function( file ) {

        $list.append( '<div id="' + file.id + '" class="item">' +

            '<h4 class="info">' + file.name + '</h4>' +

            '<p class="state">等待上传...</p>' +

        '</div>' );

    });

    // 文件上传过程中创建进度条实时显示。

    uploader.on( 'uploadProgress', function( file, percentage ) {

        var $li = $( '#'+file.id ),

            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建

        if ( !$percent.length ) {

            $percent = $('<div class="progress progress-striped active">' +

              '<div class="progress-bar" role="progressbar" style="width: 0%">' +

              '</div>' +

            '</div>').appendTo( $li ).find('.progress-bar');

        }

        $li.find('p.state').text('上传中');

        $percent.css( 'width', percentage * 100 + '%' );

    });

    uploader.on( 'uploadSuccess', function( file,data ) {

        $( '#'+file.id ).find('p.state').text('已上传');

        $('#uploader-demo').append('<input  type="text" name="attachmentid" value="'+data.attachmentid+'"/>');

        $( '#'+file.id ).addClass('upload-state-done');

    });

    uploader.on( 'uploadError', function( file ) {

        $( '#'+file.id ).find('p.state').text('上传出错');

    });

    uploader.on( 'uploadComplete', function( file ) {

        $( '#'+file.id ).find('.progress').fadeOut();

    });

    uploader.on( 'all', function( type ) {

        if ( type === 'startUpload' ) {

            state = 'uploading';

        } else if ( type === 'stopUpload' ) {

            state = 'paused';

        } else if ( type === 'uploadFinished' ) {

            state = 'done';

        }

        if ( state === 'uploading' ) {

            $btn.text('暂停上传');

        } else {

            $btn.text('开始上传');

        }

    });

    $btn.on( 'click', function() {

        if ( state === 'uploading' ) {

            uploader.stop();

        } else {

            uploader.upload();

        }

    });

    $("#aaa").click(attachmentids);	  //提交按钮

});  

</script>

</body>

</html>

Struts配置中 result = "success"  type="json"　

后台处理的action 方法：

public String uploadMeterialAttachment() throws Exception {

		String path = ServletActionContext.getServletContext().getRealPath("upload");

		File file  = new File(path);

		if (!file.exists()) {

			file.mkdirs();

		}

		List<String>  list = new ArrayList<String>();

		String  filePath = ""; //文件保存路径

		String  fileName = ""; //文件名称

		for (int i = 0,l=upload.length;i<l; i++) {

			fileName = uploadFileName[i];

			File tmp =new File(file,System.nanoTime()+"_"+uploadFileName[i]);

			FileUtils.copyFile(upload[i], tmp);

			System.out.println(path+"/"+tmp.getName());

			filePath=("/upload/"+tmp.getName());

		}

		/**

		 * 保存到附件表

		 */

		Attachment attachment = new Attachment();

		attachment.setFilename(fileName);

		attachment.setFilepath(filePath);

		Serializable ser = this.getBaseBean().saveObject(attachment);	

		if(ser != null ){

			JSONObject jsonObject = new JSONObject();

			jsonObject.put("attachmentid", ser);

		    this.getPrintWriter(jsonObject);

		}

		return Action.SUCCESS;

	}

将上传附件的 id 回调到前台，处理成一串字符串

var attachmentids = $("input[name='attachmentid']").map(function(){return $(this).val()}).get().join(",");

后台处理这些ids  只需 用 string的split方法：

　

	String[] ids = attachmentids.split(",");

	    if(ids != null){

	       for(String aid :ids){

	        	Attachment attachment = (Attachment) bean.findObject(Attachment.class,Long.parseLong(aid));

	        }

	    }

　　

　

　

　

webuploader项目中多文件上传实例的更多相关文章

  1. webuploader项目中多图片上传实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. PHP中，文件上传实例

    PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destinati ...

  3. javaweb项目中的文件上传下载功能的实现

    框架是基于spring+myBatis的. 前台页面的部分代码: <form action="${ctx}/file/upLoadFile.do"method="p ...

  4. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  5. PHP学习笔记--文件目录操作(文件上传实例)

    文件操作是每个语言必须有的,不仅仅局限于PHP,这里我们就仅用PHP进行讲解 php的文件高级操作和文件上传实例我放在文章的最后部分.--以后我还会给大家写一个PHP类似于网盘操作的例子 注意:阅读此 ...

  6. MVC中的文件上传-小结

    web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...

  7. 转：在Struts 2中实现文件上传

    (本文转自:http://www.blogjava.net/max/archive/2007/03/21/105124.html) 前一阵子有些朋友在电子邮件中问关于Struts 2实现文件上传的问题 ...

  8. javaWeb中，文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  9. Silverlight 2中实现文件上传和电子邮件发送

    Silverlight 2中实现文件上传和电子邮件发送 [收藏此页] [打印]   作者:IT168 TerryLee  2008-05-30 内容导航: 使用Web Service上传文件   [I ...

随机推荐

  1. tableView刷新指定的cell 或section和滚动到指定的位置

    转自:http://blog.csdn.net/tianyou_code/article/details/54426494 //一个section刷新 NSIndexSet *indexSet=[[N ...

  2. HDU1829【种类并查集】

    题意: 检验给出条件是否有同性恋. 思路: 条件并查集. 还是一个类似的前缀和,sum[x]是x到根这段路径上的和,根一定是坐标越小的, 那么如果说对于同类(同一个集合)的判断就sum[a]是否等于s ...

  3. css 3d旋转

  4. python 的 数据类型

    数据类型 1.1整型int py2中有int有范围,超出自动转为long长整型,py3中只有int 整除py2中无小数,可加一行代码实现 十进制转二进制 print(bin(10))十进制转八进制 p ...

  5. JSP && Servlet | AXIS 0配置 入门

    Axis2是目前比较流行的WebService引擎.WebService被应用在很多不同的场景.例如,可以使用WebService来发布服务端 Java类的方法,以便使用不同的客户端进行调用.这样可以 ...

  6. 洛谷 P2260 [清华集训2012]模积和 || bzoj2956

    https://www.lydsy.com/JudgeOnline/problem.php?id=2956 https://www.luogu.org/problemnew/show/P2260 暴力 ...

  7. 新生代内存中为什么要有两个survivor区

    首先是关于新生代中的内存分布的描述: 新生代中的对象都是“朝生夕死”的对象,所以每次gc存活的对象很少,于是在新生代中采用的垃圾回收算法是“复制算法”. 将新生代的内存分为一块较大的Eden区域和两块 ...

  8. 解决thymeleaf严格html5校验的方法

    用的是springboot加thyemleaf做静态模板. 然后会有个很烦的东西,就这个静态模板对html的格式非常严格,导致很多框架的格式都用不了,然后这里有个解除的方法: 1.在pom中添加依赖: ...

  9. Struts 2中访问Servlet API的几种方法小结

    1.使用ActionContext Action运行期间所用到的数据都保存在ActionContext中,例如session.客户端提交的参数等,ActionContext是Action的一个上下文对 ...

  10. 完成FileUpload的文件上传功能，且可改按钮样式

    FileUpload控件: 更改按钮样式思路: 自己定义一个按钮,设置该按钮的样式,然后将FileUpload控件通过定位定在自己定义的按钮上面,设置z-index,使得控件浮在自己定义的按钮上面,记 ...