### 前端樣式
### 前段代碼
<form class="layui-form" action="{:url()}" method="post" id="editForm">
<div class="layui-form-item">
<label class="layui-form-label">團隊名字</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-team_name" name="team_name" lay-verify="required" autocomplete="off" placeholder="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">團隊星級</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-start" name="start" lay-verify="required" autocomplete="off" placeholder="請寫入在0.0~5.0之間的數字">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">團隊電話</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-phone" name="phone" lay-verify="required" autocomplete="off" placeholder="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">團隊標簽</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-team_mark" name="team_mark" lay-verify="required" autocomplete="off" placeholder="請寫入團隊口號或標簽">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">團隊案例</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-case" name="case" lay-verify="required" autocomplete="off" placeholder="請寫入過往案例">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-sort" name="sort" autocomplete="off" placeholder="選填內容">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">價格(元/天)</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-price" name="price" lay-verify="required" autocomplete="off" placeholder="團隊價格">
</div>
</div>
<div class='layui-container' style='margin-top:15px'>
<label class="layui-form-label">圖片</label>
<div class="layui-input-inline">
<input type="text" style="display:none" class="layui-input field-img" name="img" lay-verify="required" autocomplete="off" placeholder="" id="img">
</div>
<button type="button" class="layui-btn" id="test2">
<i class="layui-icon"></i>選擇圖片
</button>
<div class="layui-upload-list">
{foreach name="src" id="r" key="k"}
<img src="{$r}" title="雙擊刪除該圖片" style="width:80px;height:auto;" class="rem" data="{$k}">
{/foreach}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">團隊介紹</label>
<div class="layui-input-inline">
<textarea id="content" name="content" autocomplete="off" lay-verify="content" placeholder="請輸入內容" class="layui-textarea fly-editor" style="height: 100px;"></textarea>
</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">狀態</label>
<div class="layui-input-inline">
<input type="radio" class="field-iframe" name="status" value="1" title="啟用" checked>
<input type="radio" class="field-iframe" name="status" value="0" title="禁用">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
{:token()}
<input type="hidden" class="field-id" name="id">
</div>
</div>
<div class="pop-bottom-bar">
<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">提交保存</button>
<a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
</div>
</form>
{include file="block/layui" /}
### js部分
~~~
<script >
var formData = {:json_encode($formData)};
layui.use(['form', 'func','upload','layer','layedit'], function() {
var $ = layui.jquery, form = layui.form;
layui.func.assign(formData)
$("#content").html(formData.intro);
var img = $('#img').val();
var str = img.split(',');//修改時將數據庫中傳過來的值分割成數組
var imgs = '';//新添加圖片的上傳地址
src = [];
var i = -1;
var strs= new Array();
var upload = layui.upload, layer = layui.layer, $ = layui.jquery;
var uploadInst = upload.render({
elem: '#test2', //綁定元素
// accept: 'file', //允許上傳的文件類型
acceptMime: 'image/*',
multiple: true, //允許多文件上傳
auto: true, //選完文件后不要自動上傳
// bindAction: '#upd', //指定一個按鈕觸發上傳
url: "{:url('upload')}", //上傳接口
// acceptMime: 'image/*',
before: function(obj){
// var files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
obj.preview(function (index, file, result) {
i++;
$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="雙擊刪除該圖片" data='+i+' style="width:80px;height:auto;">')
$('#remove_' + index).bind('dblclick', function () {
//雙擊刪除指定預上傳圖片
delete file[index];//刪除指定圖片
$(this).remove();
var j = $(this).attr("data")//獲取當前點擊img標簽是第幾個
delete src[j]
imgs = src.toString().split(",").filter(d=>d).toString()+','
var imgsrc = img + imgs;
$('#img').val(imgsrc);
})
})
},
done: function(res){
src.push(res.data.file);
imgs = src.toString().split(",").filter(d=>d).toString()+','
var imgsrc = img + imgs;
//上傳完畢回調
$('#img').val(imgsrc);
},
error: function(){
//請求異常回調
}
});
$('.rem').bind('dblclick', function () {
var da = $(this).attr("data")
$(this).remove();
delete str[da]
img = str.toString().split(",").filter(d=>d).toString()+','
var imgsrc = img + imgs;
$('#img').val(imgsrc);
})
var layedit , index;
var $ = layui.jquery, form = layui.form;
layedit = layui.layedit;
layedit.set({
uploadImage: {
url: "{:url('upl')}" //接口url
,type: 'post' //默認post
}
});
index = layedit.build('content',{tool: ['strong', 'italic','underline','del','|','left','center','right','|','link','unlink','face','image','|','code']}); //建立編輯器
form.verify({
content: function(value) {
return layedit.sync(index);
}
});
});
</script>
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('content'); //建立編輯器
});
</script>
~~~
### 后臺代碼
public function addGoods()
{
$src = $data = [];
if ($this->request->isPost()) {
$data = $this->request->post();
// 驗證
$result = $this->validate($data, 'SystemTeam');
$data['img'] = ltrim($data['img'],",");
if($result !== true) {
return $this->error($result);
}
$data['intro'] = $data['content'];
if (!TeamModel::create($data)) {
return $this->error('添加失敗');
}
return $this->success('添加成功');
}
//$this->assign('cat_list', CatModel::where('status', 'eq', 0)->order('id asc')->column('id,cat'));
$this->assign('src', $src);
return $this->fetch('userform');
}
public function delUser()
{
parent::del();
}
/**
* 添加分類
* @return mixed
*/
public function editGoods($id = 0)
{
if ($this->request->isPost()) {
$data = $this->request->post();
// 驗證
$data['intro'] = $data['content'];
$data['img'] = ltrim($data['img'],",");
if (!TeamModel::update($data)) {
return $this->error('修改失敗');
}
return $this->success('修改成功');
}
$row = TeamModel::where('id', '=', $id)->find()->toArray();
$src = explode(',',$row['img']);
$src =array_filter($src);
$this->assign('formData', $row);
$this->assign('src', $src);
//$this->assign('cat_list', CatModel::where('status', 'eq', 0)->order('id asc')->column('id,cat'));
return $this->fetch('userform');
}
/**
* 獲取年級
* @return mixed
*/
//上傳圖片
public function upl(){
$file = request()->file('file');
if($file){
$info = $file->move('./uploads');
if($info){
$result['code'] = 0; //為了照顧到layui富文本編輯器的小脾氣 所以此處必須要用0表示成功
$result['msg'] = '上傳成功';
$result['data']['src'] = '/uploads/'.str_replace('\\', '/', $info->getSaveName());
$result['data']['title'] = '';
echo json_encode($result);exit();
}else{
$result['code'] = 2;
$result['msg'] = '上傳失敗';
$result['data']['src'] = '';
$result['data']['title'] = '';
echo json_encode($result);exit();
}
}else{
return false;
}
}
雙擊刪除圖片
下面是富文本編輯器
