<!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. spring中的依赖注入

    Ioc的作用: 降低程序间的耦合(依赖关系) 依赖关系的管理: 以后都交给Spring来维护 在当前类需要用到其他类的对象,由Spring为我们提供, 我们只需要在配置文件中说明 依赖关系的维护,就称 ...

  2. C#中的yield return

    4.1 迭代器块 一个迭代器块(iterator block)是一个能够产生有序的值序列的块.迭代器块和普通语句块的区别就是其中出现的一个或多个yield语句. yield return语句产生迭代的 ...

  3. Codevs 1794 修剪花卉

    1794 修剪花卉   题目描述 Description ZZ对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题. 一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿 ...

  4. Mol Cell Proteomics. |阳梦如|富马酸二甲酯在神经元和星形胶质细胞中新蛋白质靶点的鉴定及相关功能验证

    大家好,本周分享的是发表在Molecular & Cellular Proteomics.上的一篇关于富马酸二甲酯在脑细胞蛋白质中新作用靶点的鉴定及功能性验证的文章,题目是Identifica ...

  5. LeetCode.897-递增搜索树(Increasing Order Search Tree)

    这是悦乐书的第346次更新,第370篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第211题(顺位题号是897).给定一棵树,按中序遍历顺序重新排列树,以便树中最左边的节 ...

  6. tree(2018.10.26)

    题意:给你一颗树,树上每个节点都有一个权值,多次询问树上的一条链的严格上升子序列长度 这道题是个神奇的倍增,先记录\(fa[x][0]\)为\(x-root\)路径上第一个权值比他大的点,然后顺便处理 ...

  7. JMeter中的HTTPS套接字错误

    Apache JMeter对启用SSL的应用程序执行性能和/或负载测试时,SSL套接字错误可能是经常遇到的麻烦,严重阻碍了您的测试工作.本文重点介绍如何通过相应地配置和调优JMeter来克服这些与连接 ...

  8. java小游戏——猜数字

    import java.util.ArrayList; import java.util.List; import java.util.Random; public class Num01 { sta ...

  9. 洛谷P2470||bzoj1068 [SCOI2007]压缩

    bzoj1068 洛谷P2470 区间dp入门题?只要注意到每个M“管辖”的区间互不相交即可 错误记录:有点小坑,比如aaaacaaaac最优解为aRRcR(意会坑在哪里),踩了一次 #include ...

  10. 538 Convert BST to Greater Tree 把二叉搜索树转换为累加树

    给定一个二叉搜索树(Binary Search Tree),把它转换成为累加树(Greater Tree),使得每个节点的值是原来的节点值加上所有大于它的节点值之和.例如:输入: 二叉搜索树:     ...