java 使用 WebUploader

来源：互联网发布：第三方软件检测编辑：程序博客网时间：2024/06/09 23:32

参考： 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数据，那么上传文件还是会成功，服务器能收到文件并保存。但是前台会显示上传失败。

阅读全文

0 0

java 使用 WebUploader

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

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

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