<!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="fileList" class="uploader-list"></div>

    <div id="filePicker">选择图片</div>

</div>

<script type="text/javascript"> 

//文件上传

// 图片上传demo

jQuery(function() {

    var $ = jQuery,

        $list = $('#fileList'),

        // 优化retina, 在retina下这个值是2

        ratio = window.devicePixelRatio || 1,

        // 缩略图大小

        thumbnailWidth = 100 * ratio,

        thumbnailHeight = 100 * ratio,

        // Web Uploader实例

        uploader;

    // 初始化Web Uploader

    uploader = WebUploader.create({

        // 自动上传。

        auto: true,

    	// swf文件路径

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

        // 文件接收服务端。

        server: '/doUpload.do',

        // [默认值：'file']  设置文件上传域的name。

        fileVal:'upload',

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

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

        pick: '#filePicker',

        // 只允许选择文件，可选。

        accept: {

            title: 'Images',

            extensions: 'gif,jpg,jpeg,bmp,png',

            mimeTypes: 'image/*'

        }

    });

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

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

        var $li = $(

                '<div id="' + file.id + '" class="file-item thumbnail">' +

                    '<img>' +

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

                '</div>'

                ),

            $img = $li.find('img');

        $list.append( $li );

        // 创建缩略图

        uploader.makeThumb( file, function( error, src ) {

            if ( error ) {

                $img.replaceWith('<span>不能预览</span>');

                return;

            }

            $img.attr( 'src', src );

        }, thumbnailWidth, thumbnailHeight );

    });

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

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

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

            $percent = $li.find('.progress span');

        // 避免重复创建

        if ( !$percent.length ) {

            $percent = $('<p class="progress"><span></span></p>')

                    .appendTo( $li )

                    .find('span');

        }

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

    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。

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

       //var fileList = $.parseJSON(callBack);//转换为json对象

    	alert('upload success\n'+data.name);

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

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

    });

    // 文件上传失败，现实上传出错。

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

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

            $error = $li.find('div.error');

        // 避免重复创建

        if ( !$error.length ) {

            $error = $('<div class="error"></div>').appendTo( $li );

        }

        $error.text('上传失败!!!');

    });

    // 完成上传完了，成功或者失败，先删除进度条。

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

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

    });

}

);

</script>

</body>

</html>

　struts配置:　

 <action name="doUpload" class="Action" method="doUpload">

            <result name="success" type="json" ></result>

        </action>

服务器后台action方法：

//上传文件对象(和表单type=file的name值一致)
private File upload [];
//文件名
private String uploadFileName[];
//上传类型
private String uploadContextType [];

public String doUpload() throws Exception {

		//ServletActionContext.getRequest().getParameterValues("fileUrl");

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

		System.out.println("------path:"+path);

		File file  = new File(path);

		if (!file.exists()) {

			file.mkdirs();

		}

		System.out.println("upload file size:"+upload.length);

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

		String  filePath = "";

		//FIXME 百度upload多文件上传，虽然是多个，但是前台是以循环的方式单独提交的，所以每次处理时只有一个。

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

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

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

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

			filePath=("/uploads/"+tmp.getName()); //文件保存路径

		}

		ServletActionContext.getResponse().getWriter().write("{\"name\":\""+filePath+"\"}"); //返回文件路径到页面

		return NONE;

	}

　　

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

  1. webuploader项目中多文件上传实例

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

  2. 关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)

    一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...

  3. 【转】关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)

    一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...

  4. 详细阐述Web开发中的图片上传问题

    Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...

  5. PHP多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  6. 使用express+multer实现node中的图片上传

    使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...

  7. Thinkphp整合阿里云OSS图片上传实例

    Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 < ...

  8. PHP结合zyupload多功能图片上传实例

    PHP结合zyupload多功能图片上传实例,支持拖拽和裁剪.可以自定义高度和宽度,类型,远程上传地址等. zyupload上传基本配置 $("#zyupload").zyUplo ...

  9. PHP 多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. UGUI技术之LayoutGroup布局实现详解

    继续学习unity4.6,unity的LayoutGroup分为三种, Horizontal Layout Group(水平布局)Vertical Layout Group(垂直布局)Grid Lay ...

  2. bzoj 4541: [Hnoi2016]矿区【平面图转对偶图+生成树】

    首先平面图转对偶图,大概思路是每条边存正反,每个点存出边按极角排序,然后找每条边在它到达点的出边中极角排序的下一个,这样一定是这条边所属最小多边形的临边,然后根据next边找出所有多边形,用三角剖分计 ...

  3. 康少带你python项目从部署到上线云服务器

    首先,服务器要安装nginx和mysql,网站文件建议放在/usr/local/www,环境python3.6+mysql5.7,阿里云的服务器可以用公共镜像有一个配置好的,不然就自己装一下环境吧. ...

  4. lombok常用注解

    简介: Lombok能以简单的注解形式来简化java代码,提高开发人员的开发效率.例如开发中经常需要写的javabean,都需要花时间去添加相应的getter/setter,也许还要去写构造器.equ ...

  5. Python 学习 Part1

    1. 斐波那契数序列 >>> a,b=0,1 >>> a 0 >>> b 1 >>> while b<10: print( ...

  6. Tomcat 连接池调优

    性能较好的Tomcat 配置文件内容 <Context> <Resource name="jdbc/pgsql" type="javax.sql.Dat ...

  7. git上如何删除已有项目

    删除fork别人的项目 由于最近想删除fork别人项目,步骤如下. 点击进入需要删除fork的项目 进入Settings选项 找到delete this repository按钮 确认是否要删除,Pl ...

  8. 大数（string 之间的快速幂）

    //字符串的乘法 string multi(string a, string b){ ], len = a.length() + b.length(); memset(arr, , sizeof ar ...

  9. 解决 mac zsh 所有命令失效

    上面的没啥用, 直接看分割线吧, 上面的是第一次遇到这个问题, 没有解决.. zsh: command not found: 参考: https://www.jiloc.com/43492.html ...

  10. CentOS 部署RabbitMQ集群

    1. 准备两台CentOS,信息如下: node1:10.0.0.123 node2:10.0.0.124 修改hostname请参照: $ hostname # 查看当前的hostname $ ho ...