zl程序教程

您现在的位置是:首页 >  后端

当前栏目

Layui使用笔记(三):TP5+layui异步上传缩略图

上传笔记异步 layui TP5 缩略图 使用
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()];
		}
	}