文章摘要
这篇文章介绍了使用ThinkPHP5和LayUI实现图片上传功能的方法，重点包括：
1. **前端实现**：通过LayUI提供的按钮和图片预览功能，用户可以在网页中方便地上传图片，并实时预览上传效果。
2. **异步传输**：为了避免页面阻塞，文章采用异步图片传输和预览功能。前端使用JavaScript提交图片，后台则会将预览图片返回给用户。
3. **后台处理**：上传图片后，系统会将处理后的图片路径和相关参数（如图片名称、地址等）通过API提交到后台数据库，用于后续存储或管理。
4. **图片格式验证**：前端对上传的图片格式进行初步判断，支持JPEG、PNG、GIF等格式，并对不支持的格式返回提示信息。
5. **保存功能**：用户可以将图片保存到指定目录，并通过表单提交保存信息，系统会根据表单信息进行数据处理和保存。
整体而言，文章通过前端和后端的结合，实现了高效、便捷的图片上传功能。
目录1、引入文件2、HTML部分3、功能实现4、后台处理图片上传保存内容
网站中很多表单都会用到上传图片，logo，照片，用户也会上传图片，这个时候网站就需要一个上传图片的功能，而且在上传后希望能预览一下看上传的对不对。
thinkphp5加layui实现图片上传功能（带图片预览）思路，异步传输图片并预览，将异步上传后的值返回表单隐藏域再提交。
首先，要引入jQuery文件，这是必须的
<link rel=”stylesheet” type=”text/css” href=”https://www.jb51.net/article/__STATIC__/plugins/layui/css/layui.css” rel=”external nofollow” >
<script type=”text/javascript” src=”https://www.jb51.net/article/__STATIC__/plugins/layui/layui.js”></script>
<form class=”layui-form”>
<div class=”layui-input-inline”>
<button class=”layui-btn layui-btn-sm” onclick=”return false;” id=”upload_img”><i class=”layui-icon”></i>上传图片</button>
<img id=”pre_img” <?php if($data[‘item’][‘img’]){echo ‘src=”https://www.jb51.net/article/’.$data[‘item’][‘img’].'”‘;}?> style=”height: 30px;” />
<input type=”hidden” name=”img” value=”{$data.item.img}”>
</div>
<div class=”layui-form-item”>
<div class=”layui-input-block”>
<button class=”layui-btn” onclick=”save()”>保存</button>
</div>
</div>
</form>
<script type=”text/javascript”>
layui.use([‘form’,’layer’,’upload’],function(){
$=layui.jquery;
var form=layui.form;
layer=layui.layer;
var upload=layui.upload;
//执行实例
var uploadInst=upload.render({
elem: ‘#upload_img’ //绑定元素
,url: ‘/admins.php/admins/video/upload_img’ //上传接口
,accept:’images’
,done: function(res){
//上传完毕回调
$(‘#pre_img’).attr(‘src’,res.msg);
$(‘input[name=”img”]’).val(res.msg);
}
,error: function(){
//请求异常回调
}
});
});
// 保存
function save(){
var title=$.trim($(‘input[name=”title”]’).val());
var url=$.trim($(‘input[name=”url”]’).val());
if(title==”){
layer.msg(‘请输入影片名称’,{‘icon’:2,’anim’:6});
return;
}
if(url==”){
layer.msg(‘请输入影片地址’,{‘icon’:2,’anim’:6});
return;
}
$.post(‘/admins.php/admins/video/save’,$(‘form’).serialize(),function(res){
if(res.code>0){
layer.msg(res.msg,{‘icon’:2,’anim’:2});
}else{
layer.msg(res.msg,{‘icon’:1});
setTimeout(function(){parent.window.location.reload();},1000);
}
},’json’);
}
</script>
public function upload_img(){
$file=request()->file(‘file’);
if($file==null){
exit(json_encode(array(‘code’=>1,’msg’=>’没有文件上传’)));
}
$info=$file->move(ROOT_PATH.’public’.DS.’uploads’);
$ext=($info->getExtension());
if(!in_array($ext,array(‘jpg’,’jpeg’,’gif’,’png’))){
exit(json_encode(array(‘code’=>1,’msg’=>’文件格式不支持’)));
}
$img=’/uploads/’.$info->getSaveName();
exit(json_encode(array(‘code’=>0,’msg’=>$img)));
}
public function save(){
$id=(int)input(‘post.id’);
$data[‘title’]=trim(input(‘post.title’));
$data[‘channel_id’]=(int)input(‘post.channel_id’);
$data[‘charge_id’]=(int)input(‘post.charge_id’);
$data[‘area_id’]=(int)input(‘post.area_id’);
$data[‘img’]=trim(input(‘post.img’));
$data[‘url’]=trim(input(‘post.url’));
$data[‘keywords’]=trim(input(‘post.keywords’));
$data[‘desc’]=trim(input(‘post.desc’));
$data[‘status’]=(int)input(‘post.status’);
if($data[‘title’]==”){
exit(json_encode(array(‘code’=>1,’msg’=>’影片名称不能为空’)));
}
if($data[‘url’]==”){
exit(json_encode(array(‘code’=>1,’msg’=>’影片地址不能为空’)));
}
if($id){
$this->db->table(‘video’)->where(array(‘id’=>$id))->update($data);
}else{
$data[‘add_time’]=time();
$this->db->table(‘video’)->insert($data);
}
exit(json_encode(array(‘code’=>0,’msg’=>’保存成功’)));
}
到此这篇关于thinkphp5加layui实现图片上传功能（带图片预览）的文章就介绍到这了,更多相关thinkphp+layui图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:ThinkPHP5+Layui实现图片上传加预览功能Thinkphp框架+Layui实现图片/文件上传功能分析thinkphp5+layui实现的分页样式示例thinkPHP+LayUI 流加载实现功能layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例