使用WebUploader客户端批量上传图片，后台使用springMVC接收实例

我是搞Java后台的，因为最近主管让用webUploader写客户端，但是在网上找了很多，能够复制就能用的并没有几个，但是经过修改后还可以，为了后面的人在需要使用到的时候可以直接copy我再此将代码和注释共享在这里。

<!--需要引入的文件-->

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

    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="../js/webuploader.min.js"></script>
  • 1
  • 2
  • 3
  • 4

这里是前台代码，这里我不过是加了个注释和修改了一点东西，这是网络上某个大神的代码 我借鉴一下。
这个webUploader 使用其实很简单，我先简单做一个描述。理解就很快了。
先准备好选择文件的元素吧，还有显示缩略图的元素，当然还有手动才需要的一个提交按钮。
第一步：js中是先创建一个webUploaer的对象，创建的时候对象有许多参数，你参数的选择决定了你启动哪些功能。
第二步：loader对象有很多的事件，你可以通过为loader绑定不同的事件，就可以监听到不同的动作了，从而对它进行相应的操作。
第三步：就是使用该对象的upload()方法进行手动的上传啦！
至于我刚刚说的很多参数和很多事件。
我会附上一个webUploaderAPI的地址，上面写的非常详细，阅读量也不大。

<body>

    <h3>图片上传</h3>

        <!--dom结构部分-->

    <div id="uploader-demo">

        <!--用来存放item-->

        <div id="fileList" class="uploader-list"></div>

        <div id="upInfo" ></div>

        <div id="filePicker">选择文件</div>

    </div>

    <input type="button" id="btn" value="开始上传">

        <script>

// 图片上传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: false,

        // swf文件路径

        swf:'../js/Uploader.swf',

        // 文件接收服务端。

        server: 'uploader',

        threads:'5',        //同时运行5个线程传输

        fileNumLimit:'10',  //文件总数量只能选择10个 

        // 选择文件的按钮。可选。

        pick: {id:'#filePicker',  //选择文件的按钮

                multiple:true},   //允许可以同时选择多个图片

     // 图片质量，只有type为`image/jpeg`的时候才有效。

        quality: 90,

        //限制传输文件类型，accept可以不写

        accept: {

            title: 'Images',//描述

            extensions: 'gif,jpg,jpeg,bmp,png,zip',//类型

            mimeTypes: 'image/*'//mime类型

        }

    });

 // 当有文件添加进来的时候，创建img显示缩略图使用

    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为容器jQuery实例

        $list.append( $li );

        // 创建缩略图

        // 如果为非图片文件，可以不用调用此方法。

        // thumbnailWidth x thumbnailHeight 为 100 x 100

        uploader.makeThumb( file, function( error, src ) {

            if ( error ) {

                $img.replaceWith('<span>不能预览</span>');

                return;

            }

            $img.attr( 'src', src );

        }, thumbnailWidth, thumbnailHeight );

    });

 // 文件上传过程中创建进度条实时显示。    uploadProgress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 Nuber类型

    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, 用样式标记上传成功。 file：文件对象，    response：服务器返回数据

    uploader.on( 'uploadSuccess', function( file,response) {

        $( '#'+file.id ).addClass('upload-state-done');

        //console.info(response);

      $("#upInfo").html("<font color='red'>"+response._raw+"</font>");

    });

    // 文件上传失败                                file:文件对象 ， code：出错代码

    uploader.on( 'uploadError', function(file,code) {

        var $li = $( '#'+file.id ),

            $error = $li.find('div.error');

        // 避免重复创建

        if ( !$error.length ) {

            $error = $('<div class="error"></div>').appendTo( $li );

        }

        $error.text('上传失败!');

    });

    // 不管成功或者失败，文件上传完成时触发。 file： 文件对象

    uploader.on( 'uploadComplete', function( file ) {

        $( '#'+file.id ).find('.progress').remove();

    });

    //绑定提交事件

    $("#btn").click(function() {

        console.log("上传...");

        uploader.upload();   //执行手动提交

        console.log("上传成功");

      });

});

</script>

</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 12

然后这里是后台我使用spring封装方法写的接收数据，
这些代码复制就可以使用了，对了 这是一个接收多文件的方法，上面的客户端代码也支持多图片上传。其实图片和文件差别不大 不过是将客户端的文件限制去掉，当然缩略图也可以丢掉，那就是文件上传啦。具体还是看客户端的webuploaderAPI。

    @RequestMapping("uploader")

        public void upload(HttpServletRequest request,HttpServletResponse response){

        System.out.println("收到图片!");

            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);

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

                dir.mkdirs();

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

                counter++;

                fileName=file.getOriginalFilename();

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

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

                    try {

                        tagetFile.createNewFile();

                    } catch (IOException e) {

                        e.printStackTrace();

                    }

                    try {

                        file.transferTo(tagetFile);

                    } catch (IllegalStateException e) {

                        e.printStackTrace();

                    } catch (IOException e) {

                        e.printStackTrace();

                    }

                }

            }

        System.out.println("接收完毕");

    }

使用WebUploader客户端批量上传图片，后台使用springMVC接收实例的更多相关文章

  1. AJAX发送json，SpringMVC 接收JSON，@RequestBody

    需求:JQuery ajax前台,采用 POST请求 发送json,后台使用SpringMVC接收json并处理 前台: $.ajax({ url:"请求地址", type:&qu ...

  2. 依赖弹出框lhdaiglog的基于WebUploader批量上传图片

    初始上传界面 //链接添加弹窗 html代码段↓ var msgcontent = ""; msgcontent += '<ul class="linkAddBox ...

  3. 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收

    利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介   WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  4. 使用plupload绕过服务器，批量上传图片到又拍云

    本文最初发布于我的个人博客:Jerry的乐园 综述 论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用pluplo ...

  5. ASP.net（C#）批量上传图片（完整版）

    摘自:http://www.biye5u.com/article/netsite/ASPNET/2010/1996.html   这篇关于ASP.Net批量上传图片的文章写得非常好,偶尔在网上看到想转 ...

  6. CkEditor批量上传图片(java)

    CKEditor上传视频CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ 最 ...

  7. 使用kindeditor来替换ecshop的fckeditor编辑器，让ecshop可以批量上传图片

    老杨原创 kindeditor此编辑器可以让ecshop批量上传图片,可以插入代码,可以全屏编辑,可以插入地图.视频,进行更多word操作,设置字体. 步骤一:进入kindeditor的官网,http ...

  8. 批量上传图片(jQuery-File-Upload使用)

    jQuery-File-Upload jQuery-File-Upload是一个jquery下的ajax文件上传插件,支持批量上传,github地址:https://github.com/blueim ...

  9. -Android -线程池 批量上传图片 -附php接收代码

    (出处:http://www.cnblogs.com/linguanh/) 目录: 1,前序 2,类特点 3,用法 4,java代码 5,php代码 1,前序 还是源于重构,看着之前为赶时间写着的碎片 ...

随机推荐

  1. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

  2. wildFly（Jboss as）入门

    目录 简介 安装 使用 简介 JBoss AS 从8版本起名为wildfly.JBoss是纯Java的EJB(企业JavaBean)服务器. JBoss As 由 Redhat出品的开源免费服务器,采 ...

  3. 前端-javascript-DOM(重点)文档对象模型

    1.DOM概念-文档对象模型 // 什么是DOM ? /* Document Object Model 文档对象模型 面向对象: 三个特性 封装 继承 多态 一个对象: 属性和方法 说 万事万物皆对象 ...

  4. UI5-文档-4.33-Routing Back and History

    现在我们可以导航到细节页面并显示发票,但是还不能回到概览页面.我们将向细节页面添加一个back按钮,并实现一个函数,再次显示概述页面. Preview A back button is now dis ...

  5. WINFORM小列子参考

    1.用树型列表动态显示菜单   密码:zx9t 二.Popup窗口提醒(桌面右下角出现)   密码:cjjo 三.台历 密码:nq4m 四.文件复制  密码:lsqj 五.进度条  密码:byti 六 ...

  6. JAVA WEB开发中的会话跟踪

    常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份. Http协议是一种无状态的协议,一旦数据交换完毕,客 ...

  7. fabric应用

    安装: easy_install fabric 或 pip install fabric 验证: #python >>> import  fabric 有时候我们可以直接使用命令行的 ...

  8. Can not find the tag library descriptor for "http://www.springframework.org/tags"

    1.Download the Spring dependency jar2.Place it to the lib folder path is /WEB-INF/lib/spring.jar 3.T ...

  9. Haskell语言学习笔记（29）CPS

    CPS (Continuation Passing Style) CPS(延续传递风格)是指函数不把处理结果作为返回值返回而是把处理结果传递给下一个函数的编码风格. 与此相对,函数把处理结果作为返回值 ...

  10. do you\have you\are you

    如果想问对方动作方面的 就用do you 例如 你知道吗? do you konw 如果想问对方是不是什么 就用are you 例如 你是一名教师吗 are you a teacher ? 如果想问对 ...