<!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. 381. Insert Delete GetRandom O(1) - Duplicates allowed

    Design a data structure that supports all following operations in average O(1) time. Note: Duplicate ...

  2. uoj#282. 长度测量鸡（构造）

    传送门 打表题--只有\(n\leq 3\)有解否则无解→_→ 或者严格证明的话是这样,因为算上端点一共\(n+1\)个点,共\(\frac{n(n+1)}{2}\)个点对,所以点对之间两两距离不相等 ...

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

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

  4. Android近场通信---NFC基础（一）（转）

    转自 http://blog.csdn.net/think_soft/article/details/8169483 本文译自:http://developer.android.com/guide/t ...

  5. 当前View的坐标相对其他View的位置坐标

    // 将rect由rect所在视图转换到目标视图view中,返回在目标视图view中的rect - (CGRect)convertRect:(CGRect)rect toView:(UIView *) ...

  6. collections 中 typing 中对象的引用

    from typing import ( Callable as Callable, Container as Container, Hashable as Hashable, Iterable as ...

  7. python 基础(十二) 图片简单处理

    pillow 图片处理模块 安装 pip install pillow  pip是安装第三方模块的工具 缩放图片实例 from PIL import Image path = r'C:\Users\x ...

  8. 洛谷 P4362 [NOI2002]贪吃的九头龙

    https://www.luogu.org/problemnew/show/P4362 首先有个很显然的dp:ans[i][j][k]表示i节点用j号头,i节点为根的子树中共有k个点用大头时i节点为根 ...

  9. vs2013缺少Mvc 怎么办？

    命名空间System.Web中不存在类型或命名空间名称Mvc是否缺少程序集引用? 以前vs2010或2012以前的引用一下就有了,为何现在vs2013没有,该这么处理呢?? 解决方案: 打开PCM:  ...

  10. PHP知识点总结2

    PHP5数据类型 String(字符串), Integer(整型), Float(浮点型), Boolean(布尔型), Array(数组), Object(对象), NULL(空值). 字符串 你可 ...