Analysis of picture / file upload function realized by ThinkPHP framework + layui

Time:2021-7-25

This article describes the picture / file upload function realized by ThinkPHP framework + layui. Share with you for your reference, as follows:

It is used in the project and found ready-made code on the Internet. It is an excuse for abnormal or illegal upload, so it will be shared with you after some exploration.

html:

<form action="" style="margin-top:20px;" enctype="multipart/form-data">
  <center>
    <div>
      <img>
      <i></i>
      <p>Click upload or drag the file here</p>
      <p>Recommended size 1920 * 512</p>
    </div>
    <input type="hidden" name="banner_photo" value="" lay-verify="required" />
    <div style="margin-top:10px;">
      < button lay submit = "" lay filter = "sub" > submit < / button >
    </div>
    <div></div>
  </center>
</form>

JS:

layui.use('upload', function(){
  var $ = layui.jquery
    ,upload = layui.upload;
  //Ordinary picture upload
  var uploadInst = upload.render({
    elem: '#uploadBanner'
    ,url: "{:U('Api/doUploadPic')}"
    ,before: function(obj){
      //Read ahead local file example, IE8 is not supported
      obj.preview(function(index, file, result){
        $('#upload-photo').attr('src', result); // Picture link (Base64)
        $('#upload-photo').attr('style', 'height:10rem;');
        $('#upload-icon').attr('style','display:none;');
      });
    }
    ,done: function(res, index, upload){
      //If upload fails
      if(res.code > 0){
        Return layer.msg ('upload failed ');
      }
      //Upload succeeded
      Console.log ("success!"+ obj2string(res) + "  " + index + "  " + upload);
    }
    ,error: function(){
      //Demonstrate the failure status and realize retransmission
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;"> Upload failed < / span > < a > retry < / a >);
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});

PHP interface:

Public function douploadpic() // upload module
  {
    $upload = new \Think\Upload();
    $upload->maxSize = 3145728;
    $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
    $upload->rootPath = './Public/'; //  Set attachment upload root directory
    $upload->savePath = 'upload/'; //  Set attachment upload subdirectory
    $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": "successful upload", "data": {"SRC": "'. $file_ a.'"}}';
      }
    }
  }

The picture is uploaded to the / public / upload folder:

Readers interested in more ThinkPHP related content can view the special topics of this site: ThinkPHP introductory tutorial, ThinkPHP template operation skills summary, ThinkPHP common methods summary, CodeIgniter introductory tutorial, CI (CodeIgniter) framework advanced tutorial, Zend framework introductory tutorial and PHP template technology summary.

I hope this article will be helpful to your PHP Programming Based on ThinkPHP framework.

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]