tp5.1使用Formdata提交上传图片前段展示

点击按钮实现图片上传并预览

前段代码

<div class="layui-form-item">
    <label class="layui-form-label">图片上传</label>
    <div class="layui-input-inline">
      <button type="button" class="layui-btn" id="pic1">上传图片</button>
      <input type="file" name="file" class="image" id="image" style="display: none">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图片展示</label>
    <div class="layui-input-inline">
      <img class="layui-upload-img"  id="demo1" style="height: 300px;display: none">
    </div>
  </div>

js 代码

//设置点击事件
$("#pic1").click(function (){
      $('#file-upload').click(); //执行图片上传
      $('.file-upload').change(function (event){ 
        var files = event.target.files; //获取图片地址信息
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(files[0]);
        $('#demo1').attr('src', imgURL); //添加图片内容
      })
    });

//监听提交
    $("#layuiadmin-app-form-submit").click(function (){
      var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
      let imageFile = document.getElementById("image").files[0];
      let  formData = new FormData();
      if (imageFile){
        formData.append('file',imageFile);
        $.ajax({
          url:'{:url("pic/picAdd")}',
          data:formData,
          type:"post",
          contentType: false,
          processData: false,
          success:function (res){
            console.log(res);
            parent.layui.table.reload('LAY-app-content-pic'); //重载表格
            parent.layer.close(index); //再执行关闭
          }})
      }else {
        layer.msg("请上传图片")
      }
    });

定义上传文件方法

public function upload($file){
        // 移动到框架应用根目录/uploads/ 目录下
        $info = $file->validate(['size'=>3145728,'ext'=>'jpg,png,gif'])->move( '../public/static/uploads');
        if($info){
            return'/static/uploads/'.$info->getSaveName();
        }else{
            // 上传失败获取错误信息
            return $file->getError();
        }
    }

执行数据库新增方法

  public function picAdd(){
        if($_FILES['file']['tmp_name']){
            $file = request()->file('file');
            //  return dump($file);
            $f=$this->upload($file);
            $data=[
                'tags'=>input('tags'),
                'pic_url'=>$f,
                'time'=>input('upload_time')
            ];
            $save=Db::name('pic')->insert($data);
            if ($save){
                return Json([
                    'code'=>200,
                    'data'=>$save
                ]);
            }else{
                return Json([
                    'code'=>400,
                    'data'=>'新增失败'
                ]);
            }
        }else{
            return Json([
                'code'=>400,
                'data'=>'新增失败'
            ]);
        }
    }