Layui多图上传和form表单一起上传

研究了好多方法，网上也是一大堆，感觉都满足不了我的需求，今天呢，就给大家介绍一下Layui多图上传同表单一起提交的方法，且预览图片和删除图片都是在前端实现，无需请求删除接口， 这里图片设置不自动上传，用按钮触发，触发上传图片的同时，等所有图片上传完了，在用trigger触发表单提交的方法(图片上传完成后在allDone回调中保存接口返回的图片地址同form表单一同提交即可)，废话不多说上代码

html代码

<div class="layui-fluid">

    <div class="layui-row">

        <form class="layui-form" id="albumform" >

            <div class="layui-form-item">

                <label for="title" class="layui-form-label">

                    <span class="x-red">*</span>标题

                <div class="layui-input-block">

                    <input type="text" id="title" name="title" required="" lay-verify="title"

                          autocomplete="off" class="layui-input">

            <div class="layui-form-item">

                <label for="desc" class="layui-form-label">

                    <span class="x-red">*</span>描述

                <div class="layui-input-block">

                    <textarea id="desc" name="desc" required lay-verify="desc" placeholder="请输入"

                              class="layui-textarea">

            <div class="layui-form-item">

                <label class="layui-form-label">

                    <span class="x-red">*</span>图片

                <div class="layui-input-block" style="margin-top:7px">

                    <div class="layui-upload">

                        <input type="text" id="imgs" style="margin:5px 0 15px 0" name="imgs" placeholder="图片路径只读 且最多可传六张" readonly  value="" required="" lay-verify="title"

                              autocomplete="off" class="layui-input ">

                        <button type="button" class="layui-btn" id="selupimgs">选择图片

                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top:10px;">

                            预览图：

                            <div class="layui-upload-list" style="display:flex;flex-wrap:wrap;" id="imgbox">

            <div class="layui-form-item">

                <label for="sort" class="layui-form-label">

                    <span class="x-red">*</span>排序

                <div class="layui-input-inline" style="margin-top:7px">

                    <input id="sort" maxlength="3" class="layui-input" type="text" name="sort"/>

            <div class="layui-form-item">

                <label for="subimg" class="layui-form-label">

                <button type="button" class="layui-btn" id="upimgs">立即提交

                <button type="submit" class="layui-btn" style="display:none" id="subimg">触发表单

</div>

JS 代码

             // 定义多图路径
              let path = ''
              //多图片上传定义实例
              let uploadInst= upload.render({
                 elem: '#selupimgs',
                 url: 'uploadimg', //改成您自己的上传接口
                 multiple: true, // 是否支持多图上传
                 size:4096,  // 上传大小限制kb
                 auto: false, // 是否自动上传
                 field:"img", // 上传字段名
                 number:6, // 最多可上传六张
                 acceptMime: 'image/*', // 上传文件类型
                 bindAction:"#upimgs", // 触发上传的按钮
                 choose: function (obj) {
                    //将每次选择的文件追加到文件队列
                    files = obj.pushFile();
                    obj.preview(function (index, file, result) {
                        let imgdom =  `<div style="position: relative;">
                                    <img id="lcimgs" src=${result} alt=${file.name} class="layui-upload-img" style=" height: 140px;margin:5px 3px;">
                                    <span  id="del${index}"  style="cursor: pointer; position: absolute;top: 10px;right: 10px;z-index: 100"  class="layui-badge">
                                    <i class="layui-icon layui-icon-delete"></i></span>
                                  </div> `
                        $(".layui-upload-list").append(imgdom)
                        //点击删除指定预上传图片
                        $(`#del${index}`).on('click',function(){
                            layer.confirm('确定要删除么',e =>{
                                delete files[index];//删除指定图片
                                $(this).parent().remove();
                                layer.close(e);
                            })
                        });
                    })
                },
                before: function(obj){
                    layer.load(1); //上传loading
            
                },
                 done: function (res) {
                     if(path==""){
                         path = res.data
                     }else{
                         path = `${path},${res.data}`
                     }
                     $('input[name="imgs"]').val(path)
                        console.log(res);
                    //单个上传完毕
                },
                allDone: function(obj){ //当文件全部被提交后，才触发
                    $("#subimg").bind("click",function () {
                        let data = {
                            title: $('#title').val(),
                            desc: $("#desc").val(),
                            sort: $('#sort').val(),
                            path: path
                        }
                        $.post('add',data,function () {
                            if(res.data == 200){
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            }
                        })
                        console.log('data',data)
                        return false
                    })
                    $("#subimg").trigger('click')
                    layer.closeAll('loading',{isOutAnim:true});
                    layer.msg('上传完成！总共上传'+obj.total+'个，成功'+obj.successful+'个，失败'+obj.aborted+'个')
                },
                error:function () {
                    layer.msg('上传失败,请稍后重试')
                    layer.closeAll('loading',{isOutAnim:true});
                    // uploadInst.upload();
                }
            })

php代码

// 上传图片
    public function uploadimg(){
        $file = request()->file('img');
        if($file){
            // 成功上传后 获取上传信息;
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/album','');
            $path = '/uploads/album/'.$info->getSaveName();
            if($path){
                return json(['code'=>200,'msg'=>'上传成功','data'=>$path]);
            }
        }else{
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }

    // 添加
    public function add(){
        if(request()->isPost()){
            $data = input('post.');
            $album = new AlbumeModel();
            $res = $album->save($data);
            if($res){
               return json(['code'=>200,'msg'=>'添加成功','data'=>[]]);
           }else{
               return json(['code'=>201,'msg'=>'添加失败','data'=>[]]);
           }
        }
        return $this->fetch();
    }
    

效果图

1587747393(1).png
1587747488(1).png

新手，大佬勿喷，如果有帮到大家，请收藏， 转发注明出处！