<!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. TP5之验证码

    处于安全的角度,我们一般都会使用tp5自带的验证码 直接上图,干就完了

  2. DP简单问题联系--最长递增子序列+最长公共子序列等

    今天重温了一下dp问题,发现自己两个礼拜不写题目就什么都不会了...心态爆炸,感觉去考试怕是要gg了... 不过今天总结一下写的题目,全部都是基础的dp问题 第一个是 求最长不下降子序列的长度 第一行 ...

  3. CodeForces 644B【模拟】

    题意: 查询数 和 最大的队列容量+1: 按时间顺序 ti代表,第i个出线的时间: di代表,第i个需要处理的时间: 对于第i个输出他所需要的时间完成,或者拒绝进入输出-1: 思路: 真是MDZZ了, ...

  4. TRANSFORM_TEX

    Shader "Custom/Exam1" { Properties { _MainTex ("Texture", 2D) = "white" ...

  5. 简单实现TabBar的自定义

    StackoverFlow上看到的,通过继承UITabBarController创建自定义TabBarController.在原有TabBar的基础上添加一个背景层,在其基础上增加三个自定义按钮,通过 ...

  6. 用BeautifulSoup简单爬取BOSS直聘网岗位

    用BeautifulSoup简单爬取BOSS直聘网岗位 爬取python招聘 import requests from bs4 import BeautifulSoup def fun(path): ...

  7. java简单操作redis数据库

    package RedisTest; import redis.clients.jedis.Jedis; public class RedisTest { private static String ...

  8. Flask (四) 模型进阶

    模型进阶 多对多关联 用户收藏电影,一个用户可以收藏多部电影, 一部电影可以被不同的用户收藏, 是一个多对多关系. ​ # 中间表(不是模型) collects = db.Table('collect ...

  9. BZOJ1108（思路）

    题目本质:因为只能往南和往东走所以不管怎么组合方案结果都是一样的Orz……我太菜了想不到嘤嘤嘤 #pragma comment(linker, "/STACK:1024000000,1024 ...

  10. Codeforces Round #497 (Div. 2) A. Romaji

    Bryce1010模板 http://codeforces.com/contest/1008/problems #include <bits/stdc++.h> using namespa ...