<!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. Lightoj 1129【字典树】

    题意:如果存在一个串是另一个串的公共前缀就是NO,否则就是YES 思路:利用字典树的特性搞搞就好了 #include <bits/stdc++.h> using namespace std ...

  2. bzoj4472:[Jsoi2015]salesman

    传送门 树形dp 对于每个点维护其子节点的走法是否唯一,每次取最大的并且不为负的(停留次数-1)个子儿子权值,然后判断走法是否唯一 假如有子节点的权值为0,走法也不唯一 代码: #include< ...

  3. TTM-To the moon

    传送门 查询历史版本,回到历史版本,这个题目显然是用主席树,好像就没了! 但是这里的修改是区间修改,众所周知主席树的空间复杂度是\(nlog(n)\)的,区间修改会导致主席树的开点到达一个相当恐怖的数 ...

  4. Cstring的使用

    https://msdn.microsoft.com/zh-cn/aa315043 1.字符串提取函数,CString::Left.CString::Mid .CString::Right CStri ...

  5. IOS正则表达式 （身份证、电话、汉字等常用条件筛选）

    下面的正则列表   替换对应的正则规则 那个字符串就可以了  例如: //正则规则 NSString *regex = @"^((13[0-9])|(147)|(17[0-9])|(15[^ ...

  6. python 基础(八) os模块

    OS模块 概念:包含了普遍的操作 系统的功能 一.函数 函数名 函数说明 os.name 获取操作系统类型 nt->Windows posix->Linux/Unix os.listdir ...

  7. JavaMailSender怎么发送163和qq邮件

    https://blog.csdn.net/Tracycater/article/details/73441010 引入Maven依赖包 <dependency> <groupId& ...

  8. 60分钟课程： 用egg.js实现增删改查,文件上传和restfulApi, webpack react es6 （一）

    今天开始我将写nodejs框架egg.js, react 实现的增删改查,文件上传等常用的b/s场景,这个将分3部分来写. 会让你在60分钟内快速 入口并应用~  你应该用es6, node,或是ph ...

  9. Linux KDE 设置显示桌面的快捷键 win+d

    原文链接:http://blog.sina.com.cn/s/blog_4b91893c0100sxxg.html 到KDE下以后发现显示桌面的快捷键被用来显示平铺窗口,在Win下的时候一直用这个快捷 ...

  10. mongodb Gridfs操作

    GridFS 介绍 GridFS是MongoDB规范用于存储和检索大文件,如图片,音频文件,视频文件等.这是一种文件系统用来存储文件,但数据存储于MongoDB集合中.GridFS存储文件比其文档大小 ...