• 技术文章 >php框架 >ThinkPHP

    Thinkphp5如何实现图片、音频和视频文件的上传功能

    藏色散人藏色散人2021-06-04 11:07:15转载130
    下面由thinkphp框架教程栏目给大家介绍Thinkphp5实现图片、音频和视频文件的上传功能方法,希望对需要的朋友有所帮助!

    首先是同步上传,最为基础的上传的方式,点击表单提交之后跳转那种。

    如下前端代码

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

    注意这里的enctype必须enctype="multipart/form-data",方案必须是post。

    后端代码直接拿tp5的官网示例代码吧:

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

    后面发现自己做的好简单,于是改进了前端代码,并且前端代码实现了文件类型校验,将同步改为ajax异步提交,同时改为formdata提交文件数据,后台代码没有太大变化,返回了提交文件的链接,而前端预览只能预览图片。改过之后的前端代码为

    <!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('post', "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>

    后端代码改进了一下

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

    细节方面,比如上传之后报错返回信息没有做处理。

    整体实现就是这样,作为一个常用的业务场景,这个本身还有很多改进的余地,比如删除已经上传的文件或者校验文件是否已经上传,如果上传不能二次上传或者删除掉前面上传的。当然如果文件名称不做处理而是原名称上传,则上传之后会覆盖原文件。

    相关推荐:最新的10个thinkphp视频教程

    以上就是Thinkphp5如何实现图片、音频和视频文件的上传功能的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:jb51,如有侵犯,请联系admin@php.cn删除
    专题推荐:Thinkphp5
    上一篇:介绍PHP基于Thinkphp5的砍价活动相关设计 下一篇:ThinkPHP5访问怎么去除/public/index.php
    第16期线上培训班

    相关文章推荐

    • thinkphp5视图文件提交form表单后台接收并打印• 解决ThinkPHP5.1版本引入composer vendor扩展包的问题• thinkPHP5框架实现多数据库连接• 介绍PHP基于Thinkphp5的砍价活动相关设计

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网