Wie Thinkphp5 die Upload-Funktion von Bildern, Audio- und Videodateien implementiert-Denken Sie an PHP-php.cn

Wie Thinkphp5 die Upload-Funktion von Bildern, Audio- und Videodateien implementiert

藏色散人

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

nach vorne

2986 Leute haben es durchsucht

In der folgenden thinkphpFramework-Tutorial-Kolumne erfahren Sie, wie Thinkphp5 die Upload-Funktion von Bildern, Audio- und Videodateien implementiert. Ich hoffe, dass es für Freunde in Not hilfreich ist!

Die erste ist der synchrone Upload, die einfachste Upload-Methode, die darin besteht, nach dem Klicken auf das Absenden des Formulars zu springen.

Der folgende 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>

Nach dem Login kopieren

Beachten Sie, dass der enctypemussenctype="multipart/form-data" und die Lösung gepostet werden muss.

Für den Back-End-Code nehmen Sie einfach den Beispielcode der offiziellen tp5-Website:

 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();
    }
  };
 }

Nach dem Login kopieren

Später stellte ich fest, dass das, was ich tat, sehr einfach war, also verbesserte ich den Front-End-Code und implementierte den Dateityp im Front-End-Code Bei der Überprüfung wurde die Synchronisierung auf asynchrone Ajax-Übermittlung umgestellt und gleichzeitig auf formdata umgestellt, um Dateidaten zu übermitteln. Der Link zum Übermitteln der Datei wird zurückgegeben, während die Front-End-Vorschau nur eine Vorschau der Bilder anzeigen kann . Der geänderte Front-End-Code lautet

<!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>

Nach dem Login kopieren

Der Back-End-Code wurde verbessert

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);
  }

Nach dem Login kopieren

Details, z. B. werden die Fehlerrückgabeinformationen nach dem Hochladen nicht verarbeitet.

Die Gesamtimplementierung ist wie folgt: Dies selbst bietet noch viel Raum für Verbesserungen, z. B. das Löschen der hochgeladenen Datei oder die Überprüfung, ob die Datei erneut hochgeladen oder gelöscht werden kann die zuvor hochgeladene Datei. Wenn der Dateiname nicht verarbeitet und der Originalname hochgeladen wird, wird die Originaldatei nach dem Hochladen natürlich überschrieben.

Verwandte Empfehlungen: Die neuesten 10 Thinkphp-Video-Tutorials

Das obige ist der detaillierte Inhalt vonWie Thinkphp5 die Upload-Funktion von Bildern, Audio- und Videodateien implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!