Thinkphp+layui实现文件上传实时回显 图片附件上传并预览

本文代码基于TP6+LAYUI框架实现的实时上传文件，并回显文件名

<div class="layui-form-item">
    <label class="layui-form-label">代理专属APK地址：</label>
    <div class="layui-input-inline">
      <input type="text" id="apkurl" name="apkurl"  value="{$u['apkurl']}" placeholder="APK存放链接" autocomplete="off" class="layui-input">
    </div>
  </div>
 <div class="layui-upload">
   <button type="button" class="layui-btn" id="cover1">上传APK</button>
</div>
<!--<div class="layui-input-inline">
    <a id="preview1" width="20px" height="20px" ></a>
</div>-->
<input type="hidden" name="head_photo" id="head_photo1">
<div>(上传限制在20M内)</div>

前端js代码

<script>
//添加图片或者附件文件
layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var uploadInst = layui.upload.render({
        elem:'#cover1'
        ,url:"upload/account/{$u['account']}"
        ,accept:'file'  // 允许上传的文件类型
        ,auto:true // 自动上传
        ,before:function (obj) {
            console.log(obj);
            // 预览
            obj.preview(function(index,file,result) {
                // console.log(file.name);    //图片名字
                // console.log(file.type);    //图片格式
                // console.log(file.size);    //图片大小
                // console.log(result);    //图片地址
                //$('#preview1').attr('src',result); //图片链接 base64
            });
            // layer.load();
        }
        // 上传成功回调
        ,done:function(res) {
            // console.log(upload);
            //console.log(res);
            $('#apkurl').val(res.msg);
            //console.log($('#head_photo').val());
        }
        // 上传失败回调
        ,error:function(index,upload) {
            // 上传失败
        }
    });
});
</script>

后端TP6代码

//上传
    public function upload()
    {
        $data=input('');
        $file = request()->file('file');
         // 移动到框架应用根目录/public/uploads/ 目录下
         $info = $file->move('uploads/');
         if ($info) {
             $path = '/uploads/'.$info->getSaveName();
             $arr['code']=1;
             $arr['msg']=$this->config['apk_domain'].$path;
             Db::name("agents")->where('account',$data['account'])->update(array('file'=>$path));
             return json($arr);
         }
    }