今天分享一个基于layui和tp5.1的的单图上传,带预览和删除
代码:
html
首先要引入layui插件,下载地址:http://www.layui.com
<div class="layui-form-item" id="pics">
<div class="layui-form-label">轮播图片</div>
<div class="layui-input-block" style="width: 70%;">
<a id="btn-thumb">
<img src="__STATIC__/images/upload.png" id="thumb-preview" width="60" height="60" style="cursor:pointer;border: 1px solid #f6f6f6;padding: 3px" />
</a>
<span class="x-red layui-word-aux">尺寸为1920X500px</span>
<div id="tips-thumb"></div>
<input type="hidden" name="image" id="input-thumb" value="">
</div>
</div>
js部分
先介绍上传部分:
<script>
layui.use('upload', function(){
var $ = layui.jquery;
var upload = layui.upload;
var uploadInst = upload.render({
elem: '#btn-thumb',
url: '/api/upload/indexone', //上传接口
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;
form.on('submit(sendData)', function(data) {
var i;
$.ajax({
url: '{:url("yms/link/save")}',
type: 'POST',
async: true,
cache: false,
data: data.field,
beforeSend: function() {
i = showLoad();
},
success: function(res) {
if (res.code == 1) {
closeLoad(i);
showSuccess(res.msg);
} else {
closeLoad(i);
layer.alert(res.msg);
}
}
})
return false;
});
});
</script>
ThinkPHP5.1-公共控制器上传部分
// 单图
public function indexone()
{
if($this->request->isPost()){
$res['code']=1;
$res['msg'] = '上传成功!';
$file = $this->request->file('file');
$info = $file->rule('uniqid')->move( '../public/uploads');
if($info){
$res['name'] = $info->getFilename();
$res['filepath'] = '/uploads/'.str_replace('\\','/',$info->getSaveName());
}else{
$res['code'] = 0;
$res['msg'] = '上传失败!'.$file->getError();
}
return $res;
}
}
ThinkPHP5.1-控制器入库操作
/**
* 轮播添加 数据处理
*/
public function save(){
if(request()->isAjax()){
$data = Request::post();
$result = BannerModel::create($data);
if($result){
return ajaxReturn(1,'添加数据成功!');
}
return ajaxReturn(0,'添加数据失败!');
}else{
return ajaxReturn(2,'数据读取异常,请刷新后重试~');
}
}
模型层采用了静态方法,不了解的可以更换其他方法
不懂得可以评论区见...