<!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. Java 时区（转）

    http://blog.csdn.net/wangpeng047/article/details/8560690

  2. c3p0连接池的简单使用和测试1

  3. PAT甲级——1135 Is It A Red-Black Tree （30 分)

    我先在CSDN上面发表了同样的文章,见https://blog.csdn.net/weixin_44385565/article/details/88863693 排版比博客园要好一些.. 1135 ...

  4. python 基础(四) 函数

    函数 一.什么是函数? 函数是可以实现一些特定功能的 小方法 或者是小程序 优点: 提高 了代码的后期维护 增加了代码的重复使用率 减少了代码量 提高了代码可读性 二.函数的定义 使用 def关键+函 ...

  5. Codeforces Round #547 (Div. 3) A.Game 23

    链接:https://codeforces.com/contest/1141/problem/A 题意: 给n和m,有两种操作:将n×2 或 n×3,求最少的乘法次数由n得到m. 不能得到时为-1. ...

  6. Glide加载图片的事例

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

  7. MySql下载地址

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

  8. js 正则验证url

    var reg = '[a-zA-z]+://[^\s]*';//正则var url = $('#add [name=notice_url]').val();if(url.length >0){ ...

  9. java threadLocal的初探

    在网上找了半天,终于找到一篇靠谱的文章了. 文章地址:http://qifuguang.me/2015/09/02/[Java%E5%B9%B6%E5%8F%91%E5%8C%85%E5%AD%A6% ...

  10. 再看SpringMVC通过一个DispatcherServlet处理Servlet

    初始入口: org.springframework.web.context.ContextLoaderListener org.springframework.web.context.ContextL ...