How to upload and preview images by combining thinkphp5 and Layui (code)

The content of this article is about how to implement image uploading and previewing (code) using the combination of thinkphp5 and Layui. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

html code

<div class="layui-upload">
   <button type="button" class="layui-btn" id="cover">上传封面</button></div> <div class="layui-input-inline">
   <img id="preview" width="200px" height="200px"></div>

js code

var uploadInst = upload.render({
      elem:'#cover'
      ,url:'addCourse'
      ,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);    //图片地址
              $('#preview').attr('src',result); //图片链接 base64
          });
          // layer.load();
      }
      // 上传成功回调
      ,done:function(res) {
          // console.log(upload);
          console.log(res);
          
      }
      // 上传失败回调
      ,error:function(index,upload) {
          // 上传失败
      }
      
  });

php interface

$file = request()->file('file');
 // 移动到框架应用根目录/public/uploads/ 目录下
 $info = $file->move('public/upload/');
 if ($info) {
     $path = 'public/upload/'.$info->getSaveName();
     return return_succ($path);
 }

Related recommendations:

PHP - image upload html upload image code image upload plug-in php php upload image code

Simple implementation of PHP ajax image upload mvc ajax upload image jquery ajax upload image php ajax upload image

The above is the detailed content of How to upload and preview images by combining thinkphp5 and Layui (code). For more information, please follow other related articles on the PHP Chinese website!