当前位置：首页 > CMS教程 > Thinkphp > 列表

Thinkphp5框架实现图片、音频和视频文件的上传功能详解

发布:smiling　来源: PHP粉丝网 　添加日期：2021-12-12 15:48:12　浏览: 评论：0　

本文实例讲述了Thinkphp5框架实现图片、音频和视频文件的上传功能，分享给大家供大家参考，具体如下：

首先是同步上传，最为基础的上传的方式，点击表单提交之后跳转那种，如下前端代码

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>上传文件</title> 
  6. </head> 
  7. <body> 
  8.   <form action="upload" enctype="multipart/form-data" method="post"> 
  9.     <input type="file" name="image" /> 
  10.     <br> 
  11.     <input type="submit" value="上传" /> 
  12.   </form> 
  13. </body> 
  14. </html> 

注意这里的enctype必须enctype="multipart/form-data"，方案必须是post，后端代码直接拿tp5的官网示例代码吧：

  1. public function upload(){ 
  2.  // 获取表单上传文件 例如上传了001.jpg 
  3.  $file = request()->file('image'); 
  4.  // 移动到框架应用根目录/public/uploads/ 目录下 
  5.  if($file){ 
  6.    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'); 
  7.    if($info){ 
  8.      // 成功上传后 获取上传信息 
  9.      // 输出 jpg 
  10.      echo $info->getExtension(); 
  11.      // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg 
  12.      echo $info->getSaveName(); 
  13.      // 输出 42a79759f284b767dfcb2a0197904287.jpg 
  14.      echo $info->getFilename(); 
  15.    }else{ 
  16.      // 上传失败获取错误信息 
  17.      echo $file->getError(); 
  18.    } 
  19.  }; 
  20. } 

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

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>上传文件</title> 
  6. </head> 
  7. <body> 
  8.   <form action="uploads1a" id="myform"> 
  9.     <input type="file" name="image" id="file" /> 
  10.   </form> 
  11.   <div id="test"></div> 
  12.   <button id="btn">点击上传</button> 
  13.   <div> 
  14.     <img src="" id="see"> 
  15.   </div> 
  16.   <script type="text/javascript"> 
  17.   var btn = document.getElementById("btn"); 
  18.   var file=document.getElementById("file"); 
  19.   var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"]; 
  20.   file.onchange=function(){ 
  21.     var name=file.value; 
  22.     var ext=name.substring(name.lastIndexOf(".") + 1).toLowerCase(); 
  23.     var res=promise.indexOf(ext); 
  24.     if (res<0) { 
  25.       alert("文件格式不正确"); 
  26.       document.getElementById("btn").disabled=true; 
  27.     }else{ 
  28.       document.getElementById("btn").disabled=false; 
  29.     } 
  30.   } 
  31.   btn.onclick = function() { 
  32.     var val=document.getElementById("file").value; 
  33.     if (val.length==0) { 
  34.       return; 
  35.     } 
  36.     var fromData = new FormData(document.forms[0]); 
  37.     fromData.append("test", "formdata"); 
  38.     var oAjax = new XMLHttpRequest(); 
  39.     oAjax.open('post', "uploadAjax", true); 
  40.     oAjax.send(fromData); 
  41.     oAjax.onreadystatechange = function() { 
  42.       if (oAjax.readyState == 4) { 
  43.         if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) { 
  44.           console.log(oAjax.responseText); 
  45.           var data=JSON.parse(oAjax.responseText); 
  46.           document.getElementById("see").setAttribute("src","/thinkphp"+data.src); 
  47.           document.getElementById("file").value=""; 
  48.         } else { 
  49.           console.log(oAjax.status); 
  50.         } 
  51.       } 
  52.     }; 
  53.   } 
  54.   </script> 
  55. </body> 
  56. </html> 

后端代码改进了一下

  1. public function uploadAjax(){ 
  2.     // 获取表单上传文件 例如上传了001.jpg 
  3.   $file = request()->file('image'); 
  4.   $test=request()->post("test"); 
  5.   $src=[];//返回文件路径 
  6.   // 移动到框架应用根目录/public/uploads/ 目录下 
  7.   if($file){ 
  8.     $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'); 
  9.     if($info){ 
  10.       // 成功上传后 获取上传信息 
  11.       // 输出 jpg 
  12.        $info->getExtension(); 
  13.       // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg 
  14.        $info->getSaveName(); 
  15.       // 输出 42a79759f284b767dfcb2a0197904287.jpg 
  16.        $info->getFilename(); 
  17.        $src["src"]=DS.'public'.DS.'uploads'.DS.$info->getSaveName(); 
  18.     }else{ 
  19.       // 上传失败获取错误信息 
  20.        $file->getError(); 
  21.     } 
  22.   }; 
  23.     return json_encode($src); 
  24.   } 

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

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

Tags: Thinkphp5图片上传 Thinkphp5音频

分享到：

推荐文章

热门文章

最新评论文章