参考： http://blog.csdn.net/finalAmativeness/article/details/54668090

最近项目需要多文件上传。

所以使用了 baidu的 webuploader作为前台的上传控件。

好了，废话不多，直接上代码

前台：

1 先下载 webuploader  连接：http://fex.baidu.com/webuploader/

2 看一下文件：

3 页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>H+ 后台主题UI框架 - 百度Web Uploader</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">

    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="KintechHtml/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

    <link href="KintechHtml/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="KintechHtml/css/animate.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/plugins/webuploader/webuploader.css">

    <link rel="stylesheet" type="text/css" href="css/demo/webuploader-demo.css">

    <link href="KintechHtml/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeIn">

    <div class="row">

        <div class="col-sm-12">

            <div class="ibox float-e-margins">

                <div class="ibox-title">

                    <h5>百度Web Uploader</h5>

                </div>

                <div class="ibox-content">

                    <div class="page-container">

                        <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>

                        <div id="uploader" class="wu-example">

                            <div class="queueList">

                                <div id="dndArea" class="placeholder">

                                    <div id="filePicker"></div>

                                    <p>或将照片拖到这里，单次最多可选300张</p>

                                </div>

                            </div>

                            <div class="statusBar" style="display:none;">

                                <div class="progress">

                                    <span class="text">0%</span>

                                    <span class="percentage"></span>

                                </div>

                                <div class="info"></div>

                                <div class="btns">

                                    <div id="filePicker2"></div>

                                    <div class="uploadBtn">开始上传</div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- 全局js -->

<script src="KintechHtml/js/jquery.min.js?v=2.1.4"></script>

<script src="KintechHtml/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->

<script src="KintechHtml/js/content.js?v=1.0.0"></script>

<!-- Web Uploader -->

<script type="text/javascript">

    // 添加全局站点信息

    var BASE_URL = 'js/plugins/webuploader';

</script>

<script src="KintechHtml/js/plugins/webuploader/webuploader.min.js"></script>

<script src="js/demo/webuploader-demo.js"></script>

</body>

</html>

PS:值得注意的地方在于，这里我直接调用了  webuploader-demo.js，里面已经实例化了webuploader对象，拿来直接用

不过需要修改一下提交的web api地址：server:'/test/uploader.do'

// 实例化

    uploader = WebUploader.create({

        pick: {

            id: '#filePicker',

            label: '点击选择图片'

        },

        dnd: '#uploader .queueList',

        paste: document.body,

        method:'POST',

        accept: {

            title: 'Images',

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

            mimeTypes: 'image/*'

        },

        // swf文件路径

        swf: BASE_URL + '/Uploader.swf',

        disableGlobalDnd: true,

        chunked: true,

        server: '/test/uploader.do',

        fileNumLimit: 300,

        fileSizeLimit: 5 * 1024 * 1024,    // 200 M

        fileSingleSizeLimit: 1 * 1024 * 1024    // 50 M

    });

后台：

package com.kintech.webSYS.controller;

import com.kintech.common.ResultModel;

import com.kintech.web.SysLog.ISystemLog;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.context.request.RequestContextHolder;

import org.springframework.web.context.request.ServletRequestAttributes;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.File;

import java.io.IOException;

import java.util.Map;

@RestController

@RequestMapping("test")

public class TestController {

    @RequestMapping(value = "uploader.do",method = RequestMethod.POST)

    public ResultModel upload(HttpServletRequest request, HttpServletResponse response) throws Exception{

        MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;

        Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象

        String upaloadUrl = request.getSession().getServletContext().getRealPath("/")+"upload/";//得到当前工程路径拼接上文件名

        File dir = new File(upaloadUrl);

        System.out.println(upaloadUrl);

        Integer counter=0;

        if(!dir.exists())//目录不存在则创建

            dir.mkdirs();

        for(MultipartFile file :files.values()){

            counter++;

            String fileName=file.getOriginalFilename();

            File tagetFile = new File(upaloadUrl+fileName);//创建文件对象

            if(!tagetFile.exists()){//文件名不存在 则新建文件，并将文件复制到新建文件中

                tagetFile.createNewFile();

                file.transferTo(tagetFile);

            }

        }

        return  new ResultModel();

    }

}

PS： 由于我是webapi 所以使用@RestController

如果使用了 @Controller 导致没有返回json数据，那么上传文件还是会成功，服务器能收到文件并保存。但是前台会显示上传失败。

java 使用 WebUploader的更多相关文章

  1. Java结合WebUploader文件上传

    之前自己写小项目的时候也碰到过文件上传的问题,没有找到很好的解决方案.虽然之前网找各种解决方案的时候也看到过WebUploader,但没有进一步深究.这次稍微深入了解了些,这里也做个小结. 简单的文件 ...

  2. java使用WebUploader做大文件的分块和断点续传

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  3. java利用webuploader实现超大文件分片上传、断点续传

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  4. Spark案例分析

    一.需求:计算网页访问量前三名 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /* ...

  5. 记录: 百度webuploader 分片文件上传java服务器端（spring mvc）示例的优化

    最近项目上用到文件分片上传,于是找到了百度的一个开源前端控件webuploader. 于是尝试使用. 下载下来后,它提供的服务器端示例代码是php版的,那么Java版的呢? 其实,上传文件都是按照rf ...

  6. 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  7. webuploader+Java如何实现分片+断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  8. springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪

    获取下载地址   QQ 313596790  A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:31359679 ...

  9. java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis

    A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:313596790freemaker模版技术 ,0个代码不用写 ...

随机推荐

  1. 使用HttpClient和Jsoup实现一个简单爬虫

    一直很想了解一下爬虫这个东西的,完全是出于兴趣,其实刚开始是准备用python的,但是由于种种原因选择了java,此处省略很多字... 总之,如果你想做一件事情的话就尽快去做吧,千万不要把战线拉得太长 ...

  2. 3.0+百度地图在地图初始化的时候就弹框展示一个信息框，而不是用户点击poi时才弹出

    有些时候我们会有这样的业务:当用户根据地址跳转到地图后,希望能够立即弹框展示该poi的地址信息. 实现方法: 百度地图3.0+的类BaiduMap中提供了一个方法showInfoWindow(Info ...

  3. synchronized和Lock的异同

    JAVA语言使用两种机制来实现堆某种共享资源的同步,synchronized和Lock.其中,synchronized使用Object对象本身的notify.wait.notifyAll调度机制,而l ...

  4. 使用xshell连接服务器，数字键盘无法使用解决办法

    打开会话管理器,选中需要设置的服务器连接,右键->属性 选中 终端->VT模式->初始数字键盘模式->设为普通 保存,重新连接即可.

  5. 线上分享-- 基于DDD的.NET开发框架-ABP介绍

    前言 为了能够帮助.Net开发者开拓视野,更好的把最新的技术应用到工作中,我在3月底受邀到如鹏网.net训练营直播间为各位学弟学妹们进行ABP框架的直播分享.同时为了让更多的.NET开发者了解ABP框 ...

  6. 自己动手写把”锁”---LockSupport深入浅出

    本篇是<自己动手写把"锁">系列技术铺垫的最后一个知识点.本篇主要讲解LockSupport工具类,它用来实现线程的挂起和唤醒. LockSupport是Java6引入 ...

  7. git bash返回上一级目录

    YITU-LIUMZ+Administrator@yitu-liumz MINGW64 ~/learngit/gitskills (dev)$ cd ..\ 注意 cd 后面有空格 然后就会弹出一个 ...

  8. Jmeter-使用Stepping Thread Group插件来设置负载场景

    前言: 什么是实际的性能测试???1)思考时间:用户在做不同操作之间有时间停顿,或者延迟,思考时间就是模拟用户的操作过程中的停顿的间.2)步伐,速度:主要包括,大量用户进来的时间和退出时间,控制迭代之 ...

  9. Python_试题_23

    # Python基础数据类型考试题# 考试时间:两个半小时 满分100分(80分以上包含80分及格)# 一,基础题.# 1,简述变量命名规范(3分)# 答:变量名是由数字.字母.下划线任意组合,变量名 ...

  10. js方法中拼接html时点击事件中拼接字符串参数

    1,代码 var html = '<a href="#" onclick="tableDelete(\''+ row.labelid +'\')"> ...