How Thinkphp5 implements the upload function of pictures, audio and video files-ThinkPHP-php.cn

How Thinkphp5 implements the upload function of pictures, audio and video files

藏色散人

Release： 2021-06-04 11:07:15

forward

2964 people have browsed it

The following is the thinkphp framework tutorial column to introduce to you how Thinkphp5 implements the upload function of pictures, audio and video files. I hope it will be helpful to friends in need!

The first is synchronous upload. The most basic upload method is to jump after clicking the form submission.

The following front-end code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
</head>
<body>
  <form action="upload" enctype="multipart/form-data" method="post">
    <input type="file" name="image" />
    <br>
    <input type="submit" value="上传" />
  </form>
</body>
</html>

Copy after login

Note that enctype must be enctype="multipart/form-data", and the solution must be post.

For the back-end code, just take the tp5 official website sample code:

 public function upload(){
  // 获取表单上传文件 例如上传了001.jpg
  $file = request()->file(&#39;image&#39;);
  // 移动到框架应用根目录/public/uploads/ 目录下
  if($file){
    $info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
    if($info){
      // 成功上传后 获取上传信息
      // 输出 jpg
      echo $info->getExtension();
      // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
      echo $info->getSaveName();
      // 输出 42a79759f284b767dfcb2a0197904287.jpg
      echo $info->getFilename();
    }else{
      // 上传失败获取错误信息
      echo $file->getError();
    }
  };
 }

Copy after login

Later I found that what I did was very simple, so I improved the front-end code, and the front-end code implemented file type verification. The synchronization was changed to ajax asynchronous submission, and the file data was submitted to formdata. The background code did not change much, and the link to submit the file was returned, while the front-end preview could only preview images. The modified front-end code is

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
</head>
<body>
  <form action="uploads1a" id="myform">
    <input type="file" name="image" id="file" />
  </form>
  <p id="test"></p>
  <button id="btn">点击上传</button>
  <p>
    <img src="" id="see">
  </p>
  <script type="text/javascript">
  var btn = document.getElementById("btn");
  var file=document.getElementById("file");
  var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"];
  file.onchange=function(){
    var name=file.value;
    var ext=name.substring(name.lastIndexOf(".") + 1).toLowerCase();
    var res=promise.indexOf(ext);
    if (res<0) {
      alert("文件格式不正确");
      document.getElementById("btn").disabled=true;
    }else{
      document.getElementById("btn").disabled=false;
    }
  }
  btn.onclick = function() {
    var val=document.getElementById("file").value;
    if (val.length==0) {
      return;
    }
    var fromData = new FormData(document.forms[0]);
    fromData.append("test", "formdata");
    var oAjax = new XMLHttpRequest();
    oAjax.open(&#39;post&#39;, "uploadAjax", true);
    oAjax.send(fromData);
    oAjax.onreadystatechange = function() {
      if (oAjax.readyState == 4) {
        if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
          console.log(oAjax.responseText);
          var data=JSON.parse(oAjax.responseText);
          document.getElementById("see").setAttribute("src","/thinkphp"+data.src);
          document.getElementById("file").value="";
        } else {
          console.log(oAjax.status);
        }
      }
    };
  }
  </script>
</body>
</html>

Copy after login

The back-end code has been improved

public function uploadAjax(){
    // 获取表单上传文件 例如上传了001.jpg
  $file = request()->file(&#39;image&#39;);
  $test=request()->post("test");
  $src=[];//返回文件路径
  // 移动到框架应用根目录/public/uploads/ 目录下
  if($file){
    $info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
    if($info){
      // 成功上传后 获取上传信息
      // 输出 jpg
       $info->getExtension();
      // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
       $info->getSaveName();
      // 输出 42a79759f284b767dfcb2a0197904287.jpg
       $info->getFilename();
       $src["src"]=DS.&#39;public&#39;.DS.&#39;uploads&#39;.DS.$info->getSaveName();
    }else{
      // 上传失败获取错误信息
       $file->getError();
    }
  };
    return json_encode($src);
  }

Copy after login

details, such as the error return information after uploading is not processed.

The overall implementation is like this. As a common business scenario, this itself still has a lot of room for improvement, such as deleting the uploaded file or verifying whether the file has been uploaded. If the upload cannot be uploaded again or deleted Uploaded earlier. Of course, if the file name is not processed and the original name is uploaded, the original file will be overwritten after uploading.

Related recommendations: The latest 10 thinkphp video tutorials

The above is the detailed content of How Thinkphp5 implements the upload function of pictures, audio and video files. For more information, please follow other related articles on the PHP Chinese website!