<!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. POJ3450【KMP理解】

    题意: 求多个字符串的最长公共子串 思路: 4000个串,200长度. 一种暴力,对于一个串最多有200*200=40000级别个子串,然后我要再处理一下next数组200,8e6复杂度: 然后我要和 ...

  2. [Swift]DJSet

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. lombok常用注解

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

  4. SpringBoot 2.0 集成 JavaMail ,实现异步发送邮件

    一.JavaMail的核心API 1.API功能图解 2.API说明 (1).Message 类: javax.mail.Message 类是创建和解析邮件的一个抽象类 子类javax.mail.in ...

  5. plt

    设定X,Y轴的长度以及刻度的方法. import numpy as np import matplotlib.pyplot as plt data = np.arange(0,1.1,0.01) pl ...

  6. PAT甲级——1118 Birds in Forest （并查集)

    此文章 同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/89819984   1118 Birds in Forest  ...

  7. typedef与复杂声明

    参考 [1] http://www.cnblogs.com/bakari/archive/2012/08/28/2659889.html [2]<C专家编程> [3 ]http://www ...

  8. 51NOD 1202 子序列个数 DP

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1202&judgeId=225600 这题看起来挺复杂,但是真正的 ...

  9. light OJ 1282 - Leading and Trailing 数学 || double技巧

    http://lightoj.com/volume_showproblem.php?problem=1282 #include <cstdio> #include <cstdlib& ...

  10. 单线程单元(STA)线程都应使用泵式等待基元

    CLR 无法从 COM 上下文 0x20ad98 转换为 COM 上下文 0x20af08,这种状态已持续 60 秒.拥有目标上下文/单元的线程很有可能执行的是非泵式等待或者在不发送 Windows ...