thinkphp5实现ajax图片上传,压缩保存到服务器
在ThinkPHP5中实现Ajax图片上传并压缩保存到服务器,你可以使用ajaxFileUpload
插件来上传图片,然后在服务器端使用imagecopyresampled
和imagejpeg
函数来压缩图片并保存。
前端代码(假设使用jQuery):
<form id="uploadForm" enctype="multipart/form-data">
<input id="fileUpload" type="file" name="file"/>
<button type="button" id="upload">上传</button>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.ajaxfileupload.js"></script>
<script>
$(document).ready(function(){
$('#upload').click(function(){
$.ajaxFileUpload({
url:'/index.php/index/upload/upload', // 你的上传处理控制器方法
secureuri:false,
fileElementId:'fileUpload',
dataType: 'json',
success: function (data, status){
if(typeof(data.error) != 'undefined') {
if(data.error != '') {
alert(data.error);
} else {
alert('图片上传成功');
// 处理上传成功后的响应
}
}
},
error: function(data, status, e){
alert(e);
}
});
});
});
</script>
后端代码(ThinkPHP控制器方法):
public function upload()
{
$file = request()->file('file');
if($file){
// 移动到框架应用根目录/uploads/ 目录下
$info = $file->move( 'uploads');
if($info){
// 成功上传后 获取上传信息
$filePath = $info->getSaveName();
// 压缩图片
$image = \think\Image::open('uploads/'.$filePath);
// 按照原图的比例缩放, inject your desired width and height
$image->thumb(1024, 1024)->save('uploads/'.$filePath);
return json(['status' => 'success', 'filePath' => $filePath]);
}else{
// 上传失败获取错误信息
return json(['error' => $file->getError()]);
}
}
}
确保你的ThinkPHP5框架配置了上传文件的相关配置,并且有jquery.ajaxfileupload.js
这个文件。上面的代码中,我们假设你的项目根目录下有一个public/uploads
目录用于存放上传的图片。在实际应用中,你需要根据自己的项目路径设置保存路径。
注意:在实际应用中,你应该添加更多的错误处理和验证来确保上传过程的安全性和稳定性。
评论已关闭