1.form表单
<div class="layui-form-item">
<label class="layui-form-label">商品主图</label>
<div class="layui-input-block">
<a id="btn-thumb"><img src="/static/index/images/thumb.jpg" id="thumb-preview" style="cursor:pointer;100px; height:100px;"></a>
<!-- 路径 -->
<input type="hidden" name="goods_thumb" id="input-thumb" value="">
<button class="layui-btn layui-btn-danger" lay-filter="demo1" id="cancel" type="button">删除图片</button>
</div>
</div>
2.ajax代码
<script>
//主图上传
layui.use('upload', function(){
var $ = layui.jquery;
var upload = layui.upload;
var uploadInst = upload.render({
elem:'#btn-thumb',
url: "{:url('/seller_Goods/upload')}",
size:2500,
exts: 'jpg|png|jpeg',
before: function(obj){
obj.preview(function(index,thumb, 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>
3.控制器
//通用多图上传接口
public function upload()
{
if($this->request->isPost()){
$res['code']=1;
$res['msg'] = '上传成功!';
$file = $this->request->file('file');
$info = $file->move('./upload/store_goods/');
if($info){
$res['name'] = $info->getFilename();
$res['filepath'] = '/'.str_replace('\','/',$info->getSaveName());
}else{
$res['code'] = 0;
$res['msg'] = '上传失败!'.$file->getError();
}
return $res;
}
}
//多图删除头像
public function delimg(){
$imgurl=input('imgurl');
$imgurl='./upload/store_goods'. $imgurl;
$res=unlink($imgurl);
if($res){
echo 1; //删除文件成功
}else{
echo 2;//删除文件失败
}
}