Thinkphp 프레임 워 크+Layui 이미지/파일 업로드 기능 분석 실현

이 사례 는 Thinkphp 프레임 워 크+Layui 가 이미지/파일 업로드 기능 을 실현 하 는 것 을 다 루 었 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
프로젝트 에 사용 되 었 고 인터넷 에서 기 존 코드 를 찾 았 는데 모두 핑계 가 이상 하거나 불법 으로 올 라 왔 기 때문에 한 번 더 모색 한 후에 여러분 과 공유 하 겠 습 니 다.
html：

<form class="layui-form layui-form-pane" action="" style="margin-top:20px;" 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">v</i>
      <p>    ，         </p>
      <p>    1920*512</p>
    </div>
    <input type="hidden" id="res" name="banner_photo" value="" lay-verify="required" />
    <div class="layui-form-item" style="margin-top:10px;">
      <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){
      //        ，   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(){
      //      ，     
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">    </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/'; //          
    $upload->savePath = 'upload/'; //          
    $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 폴 더 아래 에 올 립 니 다.


thinkpHP 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 는 ThinkPHP 프레임 워 크 를 기반 으로 한 PHP 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.