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> <select name="erji" id="erji" lay-filter="erji"></select> <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> <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>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/15247912.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」