thinkphp5以及Layui結合如何?圖片上傳並預覽（代碼）

本篇文章給大家帶來的內容是關於thinkphp5以及Layui結合如何?圖片上傳並預覽（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

html代碼

<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代碼

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介面

$file = request()->file('file'); // 移動到架構應用根目錄/public/uploads/ 目錄下 $info = $file->move('public/upload/'); if ($info) {     $path = 'public/upload/'.$info->getSaveName();     return return_succ($path); }