Thinkphp5如何實現圖片、音頻和視頻文件的上傳功能

下面由thinkphp框架教程欄目給大家介紹thinkphp5實現圖片、音頻和視頻文件的上傳功能方法，希望對需要的朋友有所幫助！

首先是同步上傳，最為基礎的上傳的方式，點擊表單提交之后跳轉那種。

如下前端代碼

nbsp;html&gt;   ??<meta> ??<title>上傳文件</title> ??

注意這里的enctype必須enctype=”multipart/form-data”，方案必須是post。

后端代碼直接拿tp5的官網示例代碼吧：

立即學習“PHP免費學習筆記（深入）”；

?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提交文件數據，后臺代碼沒有太大變化，返回了提交文件的鏈接，而前端預覽只能預覽圖片。改過之后的前端代碼為

nbsp;html&gt;   ??<meta> ??<title>上傳文件</title> ??

??

??點擊上傳 ??

????@@##@@ ??

??<script> 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>

后端代碼改進了一下

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視頻教程