<!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. 如何成为一个优秀的高级C++程序员

    C++这门语言从诞生到今天已经经历了将近 30 个年头.不可否认,它的学习难度都比其它语言较高.而它的学习难度,主要来自于它的复杂性.现在 C++ 的使用范围比以前已经少了很多,java.C#.pyt ...

  2. lightoj1072【简单数学】

    题意: 一个大圆的半径,里面有相邻的n个小圆,求这些小圆的半径: 思路: x=sin(2π/n); r=x*R/(1+x); #include <bits/stdc++.h> using ...

  3. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  4. gns3 拖出设备显示一个红色的s，无法启动虚拟设备

    通过view-docks-调出console窗口,显示错误信息: Error while creating project: Can't connect to server http://172.0. ...

  5. python 对mongdb的简单操作

    准备工作:1.选择安装合适的mongodb到本地电脑,2.创建mongodb实例,3,开启mongodb实例,4,下载pymongo第三方库,5.下载pycharm对mongodb可视化支持的插件mo ...

  6. 洛谷 P1121 环状最大两段子段和

    https://www.luogu.org/problemnew/show/P1121 不会做啊... 看题解讲的: 答案的两段可能有两种情况:一是同时包含第1和第n个,2是不同时包含第1和第n个 对 ...

  7. 【aspnetcore】在过滤器(Filter)中使用注入服务(ServiceFilter|TypeFilter)

    在MVC中,AOP是很常用的功能,我们经常会使用如 ActionFilter,IAuthorizeFilter 等描述对Controller和Action进行约束和扩展,一般做法如下: public ...

  8. NFX UNISTACK 介绍

    学习.NET Core和ASP.NET Core,偶然搜索到NFX UNISTACK,现翻译一下Readme,工程/原文:https://github.com/aumcode/nfx NFX Serv ...

  9. Glide加载图片的事例

    //获取图片的url String url = resultsEntity.getUrl(); //判断获取的图片是否存在 if (resultsEntity.getItemHeight() > ...

  10. MySql下载地址

    因为下载mysql需要注册,很麻烦,记录下下载地址: My sql 5.1.71 http://cdn.mysql.com/Downloads/MySQL-5.1/mysql-5.1.71-win32 ...