<!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. 718. Maximum Length of Repeated Subarray

    Given two integer arrays A and B, return the maximum length of an subarray that appears in both arra ...

  2. 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

    一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...

  3. ugui batches

    先渲染非重叠,然后渲染重叠 如果两个图不是同一个图集,并且都不重叠,那么按节点挂载顺序渲染   节点挂接多复杂没关系,关键是节点在Canvas下的顺序,绑在同一节点或者全部绑在根节点Canvas下渲染 ...

  4. 洛谷P3306 [SDOI2013]随机数生成器（BSGS）

    传送门 感觉我BSGS都白学了……数学渣渣好像没有一道数学题能自己想出来…… 要求$X_{i+1}=aX_i+b\ (mod \ \ p)$ 左右同时加上$\frac{b}{a-1}$,把它变成等比数 ...

  5. 17..userinfo.txt 文件中存放以下结构:

    alex:alex3714 wusir:123456 meet:meet123 1.让用户选择: 1.注册 2.登录 2.用户选择注册就将账号和密码添加到userinfo.txt中,如果用户名存在就提 ...

  6. 最长上升序列（Lis）

    Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...

  7. 【bzoj1123】BLO

    1123: [POI2008]BLO Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2222  Solved: 1090[Submit][Status ...

  8. AKOJ-1695-找素数

    题意: 给定区间L,R. 计算区间中素数个数. 2 <= L,R <= 2147483647, R-L <= 1000000. 思路: 素数区间筛 先筛(2-sqrt(r)). 再用 ...

  9. A.走方格

    链接:https://ac.nowcoder.com/acm/contest/368/A 题意: 在一个n*n的方格中,你只能斜着走. 你还有一次上下左右走的机会 给你一个起点(sx,sy),和终点( ...

  10. Technocup 2017 - Elimination Round 1 (Unofficially Open for Everyone, Rated for Div. 2) A

    Vasily has a number a, which he wants to turn into a number b. For this purpose, he can do two types ...