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

灰太狼 2023-06-24 04:52 19阅读 0赞

使用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>

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

<body>
    
        <h3>图片上传</h3>
            
        <div id="uploader-demo">
            
            <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>

然后这里是后台我使用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("接收完毕");
        }