Thinkphp5가 사진, 오디오 및 비디오 파일의 업로드 기능을 구현하는 방법
- 藏色散人앞으로
- 2021-06-03 15:53:122996검색
다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!