PHP Framework
ThinkPHP
How Thinkphp5 implements the upload function of pictures, audio and video files
How Thinkphp5 implements the upload function of pictures, audio and video files
The following is the thinkphp framework tutorial column to introduce to you how Thinkphp5 implements the upload function of pictures, audio and video files. I hope it will be helpful to friends in need!
The first is synchronous upload. The most basic upload method is to jump after clicking the form submission.
The following 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>Note that enctype must be enctype="multipart/form-data", and the solution must be post.
For the back-end code, just take the tp5 official website sample code:
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();
}
};
}Later I found that what I did was very simple, so I improved the front-end code, and the front-end code implemented file type verification. The synchronization was changed to ajax asynchronous submission, and the file data was submitted to formdata. The background code did not change much, and the link to submit the file was returned, while the front-end preview could only preview images. The modified front-end code is
<!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>The back-end code has been improved
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);
}details, such as the error return information after uploading is not processed.
The overall implementation is like this. As a common business scenario, this itself still has a lot of room for improvement, such as deleting the uploaded file or verifying whether the file has been uploaded. If the upload cannot be uploaded again or deleted Uploaded earlier. Of course, if the file name is not processed and the original name is uploaded, the original file will be overwritten after uploading.
Related recommendations: The latest 10 thinkphp video tutorials
The above is the detailed content of How Thinkphp5 implements the upload function of pictures, audio and video files. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1379
52
What should I do if I get an error when deploying thinkphp5 in Pagoda?
Dec 19, 2022 am 11:04 AM
Solution to the error reported when deploying thinkphp5 in Pagoda: 1. Open the Pagoda server, install the php pathinfo extension and enable it; 2. Configure the ".access" file with the content "RewriteRule ^(.*)$ index.php?s=/$1 [QSA ,PT,L]”; 3. In website management, just enable thinkphp’s pseudo-static.
What should I do if thinkphp5 url rewriting fails?
Dec 12, 2022 am 09:31 AM
Solution to thinkphp5 url rewriting not working: 1. Check whether the mod_rewrite.so module is loaded in the httpd.conf configuration file; 2. Change None in AllowOverride None to All; 3. Modify the Apache configuration file .htaccess to "RewriteRule ^ (.*)$ index.php [L,E=PATH_INFO:$1]" and save it.
How to get the requested URL in thinkphp5
Dec 20, 2022 am 09:48 AM
Methods for thinkphp5 to obtain the requested URL: 1. Use the "$request = Request::instance();" method of the "\think\Request" class to obtain the current URL information; 2. Use the built-in helper function "$request-> url()" to obtain the complete URL address including the domain name.
What should I do if thinkphp5 post cannot get the value?
Dec 06, 2022 am 09:29 AM
thinkphp5 post cannot get a value because TP5 uses the strpos function to find the app/json string in the content-type value of the Header. The solution is to set the content-type value of the Header to app/json.
How to remove thinkphp5 title bar icon
Dec 20, 2022 am 09:24 AM
How to remove the thinkphp5 title bar icon: 1. Find the favicon.ico file under the thinkphp5 framework public; 2. Delete the file or choose another picture to rename it to favicon.ico and replace the original favicon.ico file.
What should I do if thinkphp5 prompts that the controller does not exist?
Dec 06, 2022 am 10:43 AM
Solution to thinkphp5 prompting that the controller does not exist: 1. Check whether the namespace in the corresponding controller is written correctly and change it to the correct namespace; 2. Open the corresponding tp file and modify the class name.
How to query yesterday's data in ThinkPHP5
Dec 05, 2022 am 09:20 AM
How to query yesterday's data in ThinkPHP5: 1. Open ThinkPHP5 related files; 2. Query yesterday's data through the expression "db('table')->whereTime('c_time', 'yesterday')->select();" Can.
How to set error prompts in thinkphp5
Dec 07, 2022 am 10:31 AM
How to set error prompts in thinkphp5: 1. Enter the public folder in the project root directory and open the index.php entry file; 2. View the comments on the debug mode switch; 3. Adjust the value of the "APP_DEBUG" constant to true to display Error message prompt.
