layui 三级联动-图片上传

html 表单:

 <form class="layui-form" id="addForm">
        <div class="baseInfo block">
            <p>商品基本信息</p>
            <div class="layui-form-item">
                <label class="layui-form-label"><span>*</span>行业分类</label>
                <div class="layui-input-block">
                    <select name="diyi" lay-filter="diyi" lay-verify="required">
                        <option value="0">-请选择-</option>
                        {volist name="goodstype" id="ty"}
                        <option value="{$ty['catId']}">{$ty['catName']}</option>
                        {/volist}
                    </select>
                    &nbsp;
                    <select name="erji" id="erji" lay-filter="erji"></select>
                    &nbsp;
                    <select name="sanjiji" id="sanjiji"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">店铺分类</label>
　　　　　　　　　　// 三级联动
                <div class="layui-input-block">
                    <select id="shopCatId1" class='j-ipt J-measureUnit' lay-filter="shopCatId1"
                            name="shopCatId1">
                        <option value="">-请选择-</option>
                        {volist name=":WSTShopCats(0)" id="vo"}
                        <option value="{$vo['catId']}" {if $object[
                        'shopCatId1']==$vo['catId']}selected{/if}>{$vo['catName']}</option>
                        {/volist}
                    </select>
                    &nbsp;&nbsp;
                    <select id='shopCatId2' class='j-ipt J-measureUnit' name="shopCatId2">
                        <option value=''>-请选择-</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span>*</span>商品名称</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入商品名称" autocomplete="off" class="layui-input" name="goodsName" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">服务区域</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入服务区域" autocomplete="off" class="layui-input" name="service_area">
                    <span style="font-size: 10px;color: #666">请仅填写行政区域，如：某某区。多个用空格分隔。</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span>*</span>商品封面</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input id="upload" name="goodsImg" type="hidden" lay-verify="required">
                        <button type="button" class="layui-btn layui-bg-red" id="test1">上传图片<span style="font-size: 12px; color: rgba(255,255,255,0.9);">(图片大小2M以内)</span></button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1" style="width: 100px; height: 100px;">
                        </div>
                        <div style="width: 95px;">
                            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                    </div>

                    <a name="list-progress"> </a>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>计量单位</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入计量单位" autocomplete="off" class="layui-input" name="goodsUnit" value="件" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>报价方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="goodsPrice" value="1" title="电话议价" lay-filter="goodsPrice"  checked>
                    <input type="radio" name="goodsPrice" value="2" title="直接报价" lay-filter="goodsPrice" >
                </div>
            </div>
            <div class="layui-form-item layui-form-text unitPrice">
                <label class="layui-form-label"><span>*</span>商品单价</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入商品单价" autocomplete="off" class="layui-input" name="goodsUnitPrice" value="0" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>商品描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" lay-verify="content" class="layui-textarea" name="goodsDesc" id="goodsDesc" lay-verify="required"></textarea>
                </div>
            </div>
            <div class="layui-form-item radio">
                <label class="layui-form-label"><span>*</span>类型选择</label>
                <div class="layui-input-block">
                    <input type="radio" name="goodsType" value="1" title="服务" lay-filter="goodsType" checked>
                    <input type="radio" name="goodsType" value="2" title="商品" lay-filter="goodsType">
                </div>
            </div>
        </div>
        <div class="dealInfo block">
            <p>商品交易信息</p>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">促销信息</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入商品促销信息" autocomplete="off" class="layui-input" name="goodsTips">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>商品编号</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入商品编号" autocomplete="off" class="layui-input" value="{$goodsSn}" readonly="readonly">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>商品货号</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入商品货号" autocomplete="off" class="layui-input" value="{$goodsSn}" readonly="readonly">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>商品状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="goodsStatus" value="1" title="上架" checked>
                    <input type="radio" name="goodsStatus" value="0" title="下架">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>供应总量</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入供应总量" autocomplete="off" class="layui-input" name="goodsAll" value="0" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"><span>*</span>预警库存</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入预警库存" autocomplete="off" class="layui-input" name="goodsSave" value="0" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" value="{$goodsSn}" name="goodsSn">
                <input type="hidden" value="{$goodsSn}" name="productNo">
                <input type="hidden" value="123456" name="debug">
                <button class="layui-btn layui-bg-red" lay-submit lay-filter="addForm" type="submit">立即提交</button>
            </div>
        </div>
    </form>

 

js核心逻辑部分

<script>
    //常规使用 - 普通图片上传
    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:Url('users/uploadPic')}" //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                this.data={dir: 'goods', isWatermark: 1, isThumb: 1}//携带参数
                obj.preview(function(index, file, result){
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                console.log('res',res);
                if(res.status  !== 1){
                    $('#demo1').attr('src', ""); //图片链接（base64）
                    return layer.msg(res.msg);
                }else{
                    console.log('上传成功');
                    let _imgUrl =  res.savePath + res.name; // 图片路径
                    $("#demo1").attr("src","__ROOT__/" + _imgUrl);
                    $("#upload").val("__ROOT__" + _imgUrl);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

</script>

<script type="text/javascript">
　　　　//表单三级联动选择、提交、富文本
    layui.use('form', function() {
        let form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()
        /*三级行业分类联动*/
        form.on('select(diyi)', function(data){
            let parentId = Number(data.value); // 一级选中的值
            $.ajax({
                url: "{:url('users/getZType')}",
                method: "POST",
                data: {
                    id: parentId
                },
                success: function (res) {
                    if (res.status ===1) {
                        $("#erji").empty();
                        $("#sanjiji").empty();
                        $("#erji").append(new Option("-请选择-", ""));
                        $.each(res.data, function(index, item) {
                            $('#erji').append(new Option(item.catName, item.catId));
                        });
                    } else {
                        $("#erji").append(new Option("暂无数据", ""));
                    }
                    form.render("select");
                }
            });
        });

        form.on('select(erji)', function(data){
            let parentId = Number(data.value); // 一级选中的值
            $.ajax({
                url: "{:url('users/getZType')}",
                method: "POST",
                data: {
                    id: parentId
                },
                success: function (res) {
                    if (res.status ===1) {
                        $("#sanjiji").empty();
                        $("#sanjiji").append(new Option("-请选择-", ""));
                        $.each(res.data, function(index, item) {
                            $('#sanjiji').append(new Option(item.catName, item.catId));
                        });
                    } else {
                        $("#sanjiji").append(new Option("暂无数据", ""));
                    }
                    form.render("select");

                }
            });
        });

        /*二级商品分类联动*/
        form.on('select(shopCatId1)', function(data){
            let parentId = Number(data.value); // 一级选中的值
            $.ajax({
                url: "{:url('users/cats_list')}",
                method: "POST",
                data: {
                    parentId: parentId
                },
                success: function (res) {
                    if (res.status ===1) {
                        $("#shopCatId2").empty();
                        $("#shopCatId2").append(new Option("-请选择-", ""));
                        $.each(res.list, function(index, item) {
                            $('#shopCatId2').append(new Option(item.catName, item.catId));
                        });
                    } else {
                        $("#shopCatId2").append(new Option("暂无数据", ""));
                    }
                    form.render("select");

                }
            });
        });
        /*类型选择*/
        $(".dealInfo").slideUp();
        form.on('radio(goodsType)', function(data){
            $(".dealInfo").slideToggle();
        });

        /*报价方式选择*/
        $(".layui-form-item.unitPrice").slideUp();
        form.on('radio(goodsPrice)', function(data){
            $(".layui-form-item.unitPrice").slideToggle();
        });


        form.on("submit(addForm)", function (data) {
            console.log('提交',data);
            $.ajax({
                url:"{:url('users/launchPro')}",
                data: data.field,
                method:"POST",
                success:function (res) {
                    if(res.status === 1){
                        layer.msg(res.msg,{
                            time:2000
                        },function () {
                            window.location.href= "{:url('users/goods_list')}";
                        });
                    }else{
                        layer.msg(res.msg)
                    }
                },
                beforeSend:function () {
                    layer.msg("数据提交中...",{
                        icon:16
                    });
                }
            });
            return false;
        })
    });
    /*富文本*/
    layui.use(['layedit','form'], function(){
        var layedit = layui.layedit;
        let form = layui.form;
        var editor = layedit.build('goodsDesc',{
            tool: [
                'strong' //加粗
                ,'italic' //斜体
                ,'underline' //下划线
                ,'del' //删除线
                ,'|' //分割线
                ,'left' //左对齐
                ,'center' //居中对齐
                ,'right' //右对齐
                ,'link' //超链接
                ,'unlink' //清除链接
                // ,'image' //插入图片
                ,'help' //帮助
            ]
        }); //建立编辑器

        /*富文本内容同步*/
        form.verify({
            content: function () {
                return layedit.sync(editor);
            }
        });
    });
    $(function () {
        $(".webuploader-pick").text("");
    })
    /*添加参数信息*/
    function addParam() {
        $("#paramList").append("<div style='margin-bottom: 15px;'><input name='param' type='text'>：<input name='param01' type='text'></div>");
    }
    $("select").on("change",function () {
        $(this).find("option:selected").attr("selected", "selected");
        console.log('_select',$("select option:selected").val())
    })
</script>