html
<form class="layui-form" id="addForm">
<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=" 100px; height: 100px;">
</div>
<div style=" 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">
<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 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>
</form>
1、layui图片上传
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});
}
}
});
});
2、三级联动（选择一级后根据一级选中的渲染二级下拉选项内容，再根据二级选择的内容渲染对应三级的下拉内容，好用到没朋友，强烈推荐）
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");
}
});
});
/*类型选择*/
$(".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;
})
});
3、富文本编辑器（表单提交则无需同步富文本内容到textarea,ajax提交表单则需要同步内容到textarea）
/*富文本*/
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);
}
});
});