Layui使用笔记(三):TP5+layui异步上传缩略图
2023-09-11 14:20:00 时间
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()];
}
}
相关文章
- (SSM框架)实现小程序图片上传(配小程序源码)
- JavaWeb-SpringBoot_(上)腾讯云点播服务之视频的上传-demo
- 【IoT平台技术对接分享】如何上传正确的消息推送证书
- thinkphp6:前后端分离多图上传(php 8.1.1 / thinkphp v6.0.10LTS/vue 3.2.26)
- 使用七牛实现静态页面的上传
- 织梦上传附件提示需输入后台管理目录才能登录的解决办法
- 从Eclipse使用team provider上传UI5 application到server的注意事项
- atitit. 文件上传带进度条 atiUP 设计 java c# php
- java多线程分块上传并支持断点续传最新修正完整版本[转]
- 1V1手把手实战教学,微搭低代码中如何上传图片
- ASP.NET MVC (三、表单与文件上传)
- primefaces 上传文件尺寸受限制 Connection terminated as request was larger than
- 上传漏洞总结
- PHP上传文件(学习)
- RestEasy上传文件的工具类
- HTML5 图片上传预览(调用摄像头、文件)demo效果示例(整理)