Thinkphp框架+Layui如何實(shí)現(xiàn)圖片/文件上傳功能-創(chuàng)新互聯(lián)

這篇文章主要介紹了Thinkphp框架+Layui如何實(shí)現(xiàn)圖片/文件上傳功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)溝通電話：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁(yè)制作領(lǐng)域10多年，包括集裝箱等多個(gè)領(lǐng)域擁有多年的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)，為網(wǎng)站保駕護(hù)航！

本文實(shí)例講述了Thinkphp框架+Layui實(shí)現(xiàn)圖片/文件上傳功能。分享給大家供大家參考，具體如下：

在項(xiàng)目中用到了，再網(wǎng)上找了現(xiàn)成的代碼都是借口異常或者非法上傳，所以在一番摸索搞定之后拿來(lái)和大家分享。

html：

<form class="layui-form layui-form-pane" action=""  enctype="multipart/form-data">
  <center>
    <div class="layui-upload-drag" id="uploadBanner">
      <img class="layui-upload-img" id="upload-photo">
      <i class="layui-icon" id="upload-icon"></i>
      <p>點(diǎn)擊上傳，或?qū)⑽募献У酱颂?lt;/p>
      <p>建議尺寸1920*512</p>
    </div>
    <input type="hidden" id="res" name="banner_photo" value="" lay-verify="required" />
    <div class="layui-form-item" >
      <button class="layui-btn" lay-submit="" lay-filter="sub">提交</button>
    </div>
    <div id="demoText"></div>
  </center>
</form>

JS：

layui.use('upload', function(){
  var $ = layui.jquery
    ,upload = layui.upload;
  //普通圖片上傳
  var uploadInst = upload.render({
    elem: '#uploadBanner'
    ,url: "{:U('Api/doUploadPic')}"
    ,before: function(obj){
      //預(yù)讀本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#upload-photo').attr('src', result); //圖片鏈接（base64）
        $('#upload-photo').attr('style', 'height:10rem;');
        $('#upload-icon').attr('style','display:none;');
      });
    }
    ,done: function(res, index, upload){
      //如果上傳失敗
      if(res.code > 0){
        return layer.msg('上傳失敗');
      }
      //上傳成功
      console.log("成功啦！" + obj2string(res) + "  " + index + "  " + upload);
    }
    ,error: function(){
      //演示失敗狀態(tài)，并實(shí)現(xiàn)重傳
      var demoText = $('#demoText');
      demoText.html('<span >上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});

PHP接口：

public function doUploadPic()//上傳模塊
  {
    $upload = new \Think\Upload();
    $upload->maxSize = 3145728;
    $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
    $upload->rootPath = './Public/'; // 設(shè)置附件上傳根目錄
    $upload->savePath = 'upload/'; // 設(shè)置附件上傳子目錄
    $info = $upload->upload();
    if(!$info){
      $this->error($upload->getError());
    }else{
      foreach($info as $file){
      $data = '/Public'.$file['savepath'] . $file['savename'];
      $file_a=$data;
      echo '{"code":0,"msg":"成功上傳","data":{"src":"'.$file_a.'"}}';
      }
    }
  }

圖片就上傳到/Public/upload文件夾下了：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Thinkphp框架+Layui如何實(shí)現(xiàn)圖片/文件上傳功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞名稱：Thinkphp框架+Layui如何實(shí)現(xiàn)圖片/文件上傳功能-創(chuàng)新互聯(lián)
當(dāng)前URL：http://www.muchs.cn/article8/epcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)