• java 使用 WebUploader


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









  • 相关阅读:
    C# WinForm TextBox 作为密码输入框时,如何禁止密码查看器获取密码 ?
    .net 程序运行在不同框架版本下的支持配置(主要是.net4.0 与 .net2.0的兼容)
    比较C#的静态常量(const)和动态常量(static和readonly)
    Linux 本地yum源 、阿里yum源、163yum源的配置安装
    Mysql 单机数据库迁移几种方式
    sed中使用变量及变量中存在特殊字符‘/’处理
    Linux下安装zookeeper、配置zookeeper开机自启动
    MySQL 不同场景下的迁移方案(转载)
    配置YUM源出现Errno 14 Could not open/read repomd.xml 或者 "Couldn't open file /mnt/cdrom/repodata/repomd.xml" 错误的解决办法
    Docker安装Rabbitmq并实现挂载宿主机数据目录
  • 原文地址:https://www.cnblogs.com/hanjun0612/p/9779763.html
Copyright © 2020-2023  润新知