html代码:
<form class="layui-form" id="form">
<div class="layui-form-item">
<label class="layui-form-label">缩略图</label>
<div class="layui-input-block">
<a id="btn-thumb">
<img src="__STATIC__/default.png" id="thumb-preview" width="60" height="60" style="cursor:pointer"/>
</a>
<span class="x-red layui-word-aux">尺寸为750X400px</span>
<div id="tips-thumb"></div>
<input type="hidden" name="thumb" id="input-thumb" value="">
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
</div>
</form>
<script>
layui.use('upload', function(){
var $ = layui.jquery;
var upload = layui.upload;
var uploadInst = upload.render({
elem:'#btn-thumb',
url: "{:url('admin/common/upload')}",//上传接口
size:500,
exts: 'jpg|png|jpeg',
before: function(obj){
obj.preview(function(index, file, result){
$('#thumb-preview').attr('src',result);
});
},
done: function(res){
console.log(res);
if(res.code == 0){
return layer.msg(res.message);
}
$('#input-thumb').val(res.filepath);
}
});
});
</script>
### 下面JS是提交到数据库代码,如果不会,请参照十九章的增删改查
<script>
layui.use(['layer', 'form'], function() {
var layer = layui.layer,
$ = layui.jquery,
form = layui.form;
$(window).on('load', function() {
form.on('submit(add)', function(data) {
$.ajax({
url:"{:url('admin/chanpin/add')}",
data:$('#form').serialize(),
type:'post',
async: false,
success:function(res) {
if(res.code == 1) {
layer.msg(res.msg, {'icon': 1});
setTimeout(function () {
parent.window.location.reload();
}, 1000);
} else {
layer.msg(res.msg);
}
}
})
return false;
});
});
});
</script>
控制器代码:
//通用缩略图上传接口
public function upload()
{
if($this->request->isPost()){
$res['code']=1;
$res['msg'] = '上传成功!';
$file = $this->request->file('file');
$info = $file->move('../public/upload/admin/');
//halt( $info);
if($info){
$res['name'] = $info->getFilename();
//$res['filepath'] = 'upload/admin/'.$info->getSaveName();
$res['filepath'] = 'upload/admin/'.str_replace('\\','/',$info->getSaveName());
}else{
$res['code'] = 0;
$res['msg'] = '上传失败!'.$file->getError();
}
return $res;
}
}
//添加到数据库,这里借助了模型
//添加
public function add()
{
if(request()->isPost())
{
//dump(input('post.'));
$res = $this->db->tianjia(input('post.'));
if($res['valid'])
{
$this->success($res['msg']);
}else{
$this->error($res['msg']);
}
}
return $this->fetch();
}
//模型代码
public function tianjia($data)
{
$count = count($data['pc_src']);//获取传过来有几张图片
if($count){
for($i = 0;$i< $count;$i++){
$data['pics'][]=array("src"=>$data['pc_src'][$i]);
}
$data['pics'] = json_encode($data['pics']);
//$data['cc'] = json_decode($data['bb']);
//halt($data);
}
$result = $this->validate(true)->allowField(true)->save($data);
if($result){
// 验证失败 输出错误信息
return ['valid'=>1,'msg'=>'添加成功'];
//dump($this->getError());
}else{
return ['valid'=>0,'msg'=>$this->getError()];
}
}