小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

layui+java多文件上传详解

发表于 6个月前   1853次查看    0评论  4 赞

今天做了一个多文件上传的页面,运用的是layui前端框架,顺便把后台处理代码也贴出来,仅供参考

3ED1EDC1-81AA-42be-B23C-4A1295640BD8.png


第一步:layui下载安装


地址:https://www.layui.com/



第二步:前端样式

<!-这里直接使用layui自带的即可-->
<div class="layui-upload">
    <button type="button" class=" layui-btn layui-btn-normal" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
    <div class="layui-upload-list layui-upList-minHeight">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList">
            </tbody>
        </table>
    </div>
    <div class="layui-form-item layui-btn-Center">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="choiceListAction">开始上传</button>
            <button class="btn layui-btn layui-btn-primary js_close" id="quXiao" type="button">取消</button>
        </div>
    </div>
</div>


第三步:js处理

 $(function(){
        var id=$("#shallowId").val();
    var uploadFile={
        init:function () {
            this.upload();
        },
        //上传文件
        upload:function(){
            layui.use('upload', function(){
                var $ = layui.jquery,
                    upload = layui.upload;
                //多文件列表示例
                var demoListView = $('#demoList'),
                    uploadListIns = upload.render({
                        elem: '#choiceList',
                        url: 'qp/shallow/comment/upload/'+id,
                        accept: 'file',
                        multiple: true,
                        auto: false,
                        bindAction: '#choiceListAction',
                        choose: function(obj){
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function(index, file, result){
                                if($('#demoList tr td').eq(0).text()=='xxx.txt'){
                                    $('#demoList').empty();
                                }
                                var tr = $(['<tr id="upload-'+ index +'">',
                                    '<td>'+ file.name +'</td>',
                                    '<td>'+ (file.size/1014).toFixed(1) +'kb</td>',
                                    '<td>等待上传</td>',
                                    '<td>',
                                    '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                    '</td>',
                                    '</tr>'].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function(){
                                    obj.upload(index, file);
                                });

                                //删除
                                tr.find('.demo-delete').on('click', function(){
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                                });
                                demoListView.append(tr);
                            });
                        },
                        done: function(res, index, upload){
                            if(res.code == 0){ //上传成功
                                var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                tds.eq(3).html(''); //清空操作
                                return delete this.files[index]; //删除文件队列已经上传成功的文件


                            }
                            this.error(index, upload,res.msg);
                        },
                        error: function(index, upload,msg){
                            var tr = demoListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">'+msg+'</span>');
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                    });
            });
        }

    }
    uploadFile.init();
})


这里主要配置url即可,调用后台接口进行上传。


第四步:java后台处理

@RequestMapping(value = "/upload/{shallowId}", method = RequestMethod.POST)
@ResponseBody
public JSONObject upload(@RequestParam("file")MultipartFile file, @PathVariable Integer shallowId) throws Exception {
    JSONObject json = new JSONObject();
    String newFileName = null;
    if (file != null && !file.isEmpty()) {
        Map<String,Object> params= QiniuUtils.upImage(file);
        Integer status= (Integer) params.get("status");
        newFileName= "http://file.caapay.com/"+(String)params.get("newFileName");
        params.put("shallowId",shallowId);
        params.put("newFileName",newFileName);
        if(status==200){
            //执行数据库操作
            Integer num=shallowCommentservice.uploadImg(params);
            if (num>0){
                json.put("code",0);
                json.put("msg","");
                json.put("data",newFileName);
                return json;
            }else{
                json.put("code",1);
                json.put("msg","");
                json.put("data",newFileName);
                return json;
            }
        }else{
            //返回错误
            json.put("code",1);
            json.put("msg","");
            json.put("data",newFileName);
            return json;
        }

    }else{
        //返回错误
        json.put("code",1);
        json.put("msg","");
        json.put("data","");
        return json;
    }
}

注意事项:

1、这里需要注意的是,虽然是多文件上传,其实是一次一次请求的,他发送到后台的是数据流,所以我们用MultipartFile 接受即可

2、这里我是上传到七牛云,具体情况具体分析

3、返回值需返回特定json格式,否则报错

        json.put("code",1);//除了0以外的都是错误
        json.put("msg","");//错误信息自定义即可
        json.put("data","");//需要返回的值自定义

4人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论0