怎么在ThinkPHP5中使用Layui實現(xiàn)圖片上傳加預(yù)覽功能

怎么在ThinkPHP5中使用Layui實現(xiàn)圖片上傳加預(yù)覽功能？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

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);
   // 預(yù)覽
   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();
  }
  // 上傳成功回調(diào)
  ,done:function(res) {
   // console.log(upload);
   console.log(res);
  }
  // 上傳失敗回調(diào)
  ,error:function(index,upload) {
   // 上傳失敗
  }
 });

php接口

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

thinkphp是什么

thinkphp屬于一種免費的開發(fā)框架，能夠用于開發(fā)前端網(wǎng)頁，最早thinkphp是為了簡化開發(fā)而產(chǎn)生的，thinkphp同時也是遵循Apache2協(xié)議，最初是從Struts演變過來，也把國外一些好的框架模式進行利用，使用面向?qū)ο蟮拈_發(fā)結(jié)構(gòu)，兼容了很多標簽庫等模式，它能夠更方便和快捷的開發(fā)和部署應(yīng)用，當然不僅僅是企業(yè)級應(yīng)用，任何php應(yīng)用開發(fā)都可以從thinkphp的簡單、兼容和快速的特性中受益。

看完上述內(nèi)容，你們掌握怎么在ThinkPHP5中使用Layui實現(xiàn)圖片上傳加預(yù)覽功能的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！